一，概述
TabBar，是材料设计(Material design)中很常用的一种横向标签页。在Android原生开发中，我们常用ViewPage或者一些常用的标签页开源库，来实现并行界面的横向滑动展示，在iOS原生开发中我们可以基于UICollectionView/UIButton来封装实现这一功能，在Flutter的世界中，TabBar是被定义在Material Component中，所以他的使用需要在MaterialApp中。通常，我们会在AppBar的底部部分结合TabBarView来使用TabBar。
二，Tab关键元素
三，构造函数
const DefaultTabController({ Key key, @required this.length, this.initialIndex = 0, @required this.child, }) : assert(initialIndex != null), assert(length >= 0), assert(initialIndex >= 0 && initialIndex < length), super(key: key);
TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
: assert(length != null && length >= 0),
assert(initialIndex != null && initialIndex >= 0 && (length == 0 || initialIndex < length)),
_index = initialIndex,
_previousIndex = initialIndex,
_animationController = AnimationController.unbounded(
value: initialIndex.toDouble(),
vsync: vsync,
);
/** 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); */
const Tab({ Key key, this.text, this.icon, this.child, }) : assert(text != null || child != null || icon != null), assert(!(text != null && null != child)), // TODO(goderbauer): https://github.com/dart-lang/sdk/issues/34180 super(key: key);
const TabBarView({ Key key, @required this.children, //Tab页内容页组件数组集合 this.controller, //TabController对象 this.physics, this.dragStartBehavior = DragStartBehavior.start, }) : assert(children != null), assert(dragStartBehavior != null), super(key: key);
四，创建标签栏
/**2.创建Tabbar */ @override Widget build(BuildContext context) { // TODO: implement build return new DefaultTabController( length: myTabs.length, child: new Scaffold( //AppBar appBar:new AppBar( title: new Text(‘顶部标签栏‘), bottom: new TabBar( tabs: myTabs, //标签数组 indicatorColor: Colors.blue,//指示器的颜色 isScrollable: true,//是否滑动 ), ) , /**3.绑定Tabbar 和 TabBarView */ //body body: new TabBarView( children: myTabs.map((Tab tab){ return new Center( child: new Text(tab.text)); }).toList(), ), ), ); }
class TabBarDemoState extends State<TabBarDemo> with SingleTickerProviderStateMixin { TabController _tabController; //定义tabcontroller变量 @override void dispose() { _tabController.dispose(); //销毁 super.dispose(); } void initState() { super.initState(); _tabController = new TabController(vsync: this, length: 3); //创建 } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(‘顶部tab切换‘), bottom: new TabBar( tabs: <Widget>[ new Tab( icon: new Icon(Icons.directions_bike), ), new Tab( icon: new Icon(Icons.directions_boat), ), new Tab( icon: new Icon(Icons.directions_bus), ), ], controller: _tabController, //tabbar与自定义的tabcontroller绑定 ), ), body: new TabBarView( controller: _tabController, //tabbarView与 自定义的tabController绑定 children: <Widget>[ new Center(child: new Text(‘自行车‘)), new Center(child: new Text(‘船‘)), new Center(child: new Text(‘巴士‘)), ], ), ); }
/**1. 创建Tab数据 */ final List<Tab> myTabs = <Tab>[ new Tab(icon: new Icon(Icons.home), text:‘首页‘, ), new Tab( icon: new Icon(Icons.message), text:‘个人信息‘, ), new Tab( icon: new Icon(Icons.camera), text:‘朋友圈‘, ), new Tab( icon: new Icon(Icons.access_alarm), text: ‘闹钟‘, ) ];
appBar:new AppBar( title: new Text(‘顶部标签栏‘), bottom: new TabBar( tabs: myTabs, //标签数组 indicatorColor: Colors.blue,//指示器的颜色 isScrollable: true,//是否滑动 ), )
/**3.绑定Tabbar 和 TabBarView */ //body body: new TabBarView( children: myTabs.map((Tab tab){ return new Center( child: new Text(tab.text)); }).toList(), ),
import ‘package:flutter/material.dart‘; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return new MaterialApp( title: ‘顶部标签栏‘, theme: new ThemeData( primaryColor: Colors.red ), home: new App(), ); } } class App extends StatelessWidget { /**1. 创建Tab数据 */ final List<Tab> myTabs = <Tab>[ new Tab(icon: new Icon(Icons.home), text:‘首页‘, ), new Tab( icon: new Icon(Icons.message), text:‘个人信息‘, ), new Tab( icon: new Icon(Icons.camera), text:‘朋友圈‘, ), new Tab( icon: new Icon(Icons.access_alarm), text: ‘闹钟‘, ) ]; /**2.创建Tabbar */ @override Widget build(BuildContext context) { // TODO: implement build return new DefaultTabController( length: myTabs.length, child: new Scaffold( //AppBar appBar:new AppBar( title: new Text(‘顶部标签栏‘), bottom: new TabBar( tabs: myTabs, //绑定标签数组 indicatorColor: Colors.blue,//指示器的颜色 isScrollable: true,//是否滑动 ), ) , /**3.绑定Tabbar 和 TabBarView */ //body body: new TabBarView( children: myTabs.map((Tab tab){ return new Center( child: new Text(tab.text)); }).toList(), ), ), ); } }
五，总结
TabBarView和TabBar都有一个TabController的参数，TabbarView和TabBar就是由TabController来控制同步，点击某个Tab后，要同步显示对应的TabBarView，创建TabController有两种方式：
@override Widget build(BuildContext context) { return new DefaultTabController(); }
参考上面“使用自定tabcontroller代码”
原文：https://www.cnblogs.com/lxlx1798/p/11078901.html