参考
//旅拍
class TravelPage extends StatefulWidget {
TravelPage({Key? key}) : super(key: key);
@override
_TravelPageState createState() => _TravelPageState();
}
class _TravelPageState extends State<TravelPage>
with SingleTickerProviderStateMixin {
List<String> tabs = ["推荐", "附近", "热门", "旅行热点", "露营初体验", "酒店民宿", "美食探店", "亲子", "小众", "自驾", "网红", "逛展"];
late TabController _controller;
@override
void initState() {
print("TravelPage initState...");
super.initState();
_controller = TabController(length: tabs.length, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
color: Colors.white,
padding: EdgeInsets.only(top: 30),
child: TabBar(
controller: _controller,
isScrollable: true,
labelColor: Colors.black,
labelPadding: EdgeInsets.fromLTRB(20, 0, 20, 5),
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Color(0xff1fcfbb), width: 3),
insets: EdgeInsets.only(bottom: 10),
),
tabs: tabs.map<Tab>((String e) {
return Tab(text: e);
}).toList()),
),
Flexible(
child: TabBarView(
controller: _controller,
children: tabs.map<Container>((String e) {
return Container(
child: Center(
child: Text(e, textScaleFactor: 5),
),
);
}).toList(),
))
],
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
我自己的代码
import 'package:flutter/material.dart';
import 'AudioPlayer.dart';
import 'DynamicRecommendNav.dart';
// /*
// *音乐播放器顶部的导航界面
// */
class PlayerNavigation extends StatefulWidget {
const PlayerNavigation({key}) : super(key: key);
@override
PlayerState createState() => PlayerState();
}
class PlayerState extends State<PlayerNavigation>
with SingleTickerProviderStateMixin {
List<String> tabs = ["歌曲", "歌詞"];
TabController _controller;
@override
void initState() {
super.initState();
_controller = TabController(length: tabs.length, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
//顶部导航栏的背景颜色
decoration: BoxDecoration(color: Color(0xFF1F1F1F)),
//以行的方式排放
child:Row(
//居中
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
// margin: const EdgeInsets.only(right: 70),
padding: EdgeInsets.only(top: 30),
width: 50,
child: Image.asset(
'assets/base_widgets/icon_player_rounded.png',
fit: BoxFit.fitWidth,
),
),
Container(
color: Color(0xFF1F1F1F),
padding: EdgeInsets.only(top: 30),
child: TabBar(
controller: _controller,
isScrollable: true,
labelColor: Colors.white,
labelPadding: EdgeInsets.fromLTRB(20, 0, 20, 5),
indicator: UnderlineTabIndicator(
// borderSide: BorderSide(color: Color(0xff1fcfbb), width: 3),
insets: EdgeInsets.only(bottom: 10),
),
tabs: tabs.map<Tab>((String e) {
return Tab(text: e);
}).toList()),
),
Container(
margin: const EdgeInsets.only(),
padding: EdgeInsets.only(top: 30),
width: 50,
child: Image.asset(
'assets/base_widgets/icon_player_share.png',
fit: BoxFit.fitWidth,
),
),
],
),
),
Flexible(
child: TabBarView(
controller: _controller,
children: const <Widget>[
AudioPlay(),
AudioPlay(),
],
))
],
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)