Flutter之TabBar組件

/** const TabBar({ Key key, @required this.tabs,//顯示的標簽內容，一般使用Tab對象,也可以是其他的Widget this.controller,//TabController對象 this.isScrollable = false,//是否可滾動 this.indicatorColor,//指示器顏色 this.indicatorWeight = 2.0,//指示器高度 this.indicatorPadding = EdgeInsets.zero,//底部指示器的Padding this.indicator,//指示器decoration，例如邊框等 this.indicatorSize,//指示器大小計算方式，TabBarIndicatorSize.label跟文字等寬,TabBarIndicatorSize.tab跟每個tab等寬 this.labelColor,//選中label顏色 this.labelStyle,//選中label的Style this.labelPadding,//每個label的padding值 this.unselectedLabelColor,//未選中label顏色 this.unselectedLabelStyle,//未選中label的Style }) : assert(tabs != null), assert(isScrollable != null), assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)), assert(indicator != null || (indicatorPadding != null)), super(key: key); */ 

默認方式的TabController // 繼承SingleTickerProviderStateMixin，提供單個Ticker（每個動畫幀調用它的回調一次） class Widget_TabBar_Default_State_Page extends State<Widget_TabBar_Default_Page> with SingleTickerProviderStateMixin { TabController controller; var tabs = <Tab>[]; @override void initState() { super.initState(); tabs = <Tab>[ Tab(text: "Tab1",), Tab(text: "Tab2",), Tab(text: "Tab3",), Tab(text: "Tab4",), Tab(text: "Tab5",), Tab(text: "Tab6",), Tab(text: "Tab7",), Tab(text: "Tab8",), Tab( text: "Tab9", icon: Icon(Icons.phone), ), ]; //initialIndex初始選中第幾個 controller = TabController(initialIndex: 3, length: tabs.length, vsync: this); } @override Widget build(BuildContext context) { return DefaultTabController( length: tabs.length, child: MaterialApp( home: Scaffold( appBar: AppBar( title: TabBar( controller: controller,//可以和TabBarView使用同一個TabController tabs: tabs, isScrollable: true, indicatorColor: Color(0xffff0000), indicatorWeight: 1, indicatorSize: TabBarIndicatorSize.tab, indicatorPadding: EdgeInsets.only(bottom: 10.0), labelPadding: EdgeInsets.only(left: 20), labelColor: Color(0xff333333), labelStyle: TextStyle( fontSize: 15.0, ), unselectedLabelColor: Color(0xffffffff), unselectedLabelStyle: TextStyle( fontSize: 12.0, ), ), ), body: TabBarView( controller: controller, children: tabs .map((Tab tab) => Container(child: Center(child: Text(tab.text),),)) .toList()), ), ), ); } @override void dispose() { super.dispose(); controller.dispose(); } } 

自定義方式的TabController class Widget_TabBar_Userdefined_State_Page extends State<Widget_TabBar_Userdefined_Page> with SingleTickerProviderStateMixin { var controller; var tabs = <Tab>[ Tab(text: "Tab1",), Tab(text: "Tab2",), Tab(text: "Tab3",), Tab(text: "Tab4",), Tab(text: "Tab5",), Tab(text: "Tab6",), Tab(text: "Tab7",), Tab(text: "Tab8",), Tab( text: "Tab9", icon: Icon(Icons.phone), ), ]; @override void initState() { controller = TabController( length: tabs.length, vsync: this, //動畫效果的異步處理，默認格式，背下來即可 ); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: TabBar( tabs: tabs, controller: controller, //配置控制器 isScrollable: true, indicatorColor: Color(0xffff0000), indicatorWeight: 1, indicatorSize: TabBarIndicatorSize.tab, indicatorPadding: EdgeInsets.only(bottom: 10.0), labelPadding: EdgeInsets.only(left: 20), labelColor: Color(0xff333333), labelStyle: TextStyle( fontSize: 15.0, ), unselectedLabelColor: Color(0xffffffff), unselectedLabelStyle: TextStyle( fontSize: 12.0, ), ), ), body: TabBarView( controller: controller, //配置控制器 children: tabs .map((Tab tab) => Container(child: Center(child: Text(tab.text),),)) .toList()), ), ); } //當整個頁面dispose時，記得把控制器也dispose掉，釋放內存 @override void dispose() { controller.dispose(); super.dispose(); } } 

練習demo，鏈接https://gitee.com/xgljh/Flutter

作者：習慣了_就好
來源：簡書