TabBar介绍
一个显示程度行选项卡的Widget。 通常创立为 AppBar 的 AppBar.bottom 局部并与 TabBarView 联合应用
在什么状况下应用TabBar
当你的app内容类别比拟多的时候，咱们经常会用到TabBar，例如网易新闻、京东、B站等，所以TabBar是一个应用十分频繁的组件。
示例代码
本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址
如何应用
步骤一：创立TabController
为了使所选的 tab 与它所对应的内容可能同步变动，须要用 TabController 进行管制。咱们既能够手动创立一个 TabController ，也可能间接应用 DefaultTabController widget。最简略的抉择是应用 DefaultTabController widget，因为它可能创立出一个可供所有子 widgets 应用的 TabController。
DefaultTabController( // 选项卡的数量 length: 3, child: // 在下一步实现此代码);步骤二：创立tabs
当咱们创立DefaultTabController, 接下来就能够用 TabBar widget 来创立 tabs。上面这个创立了蕴含三组 Tab widget 的 TabBar（一个），并把它搁置于 AppBar widget 中。
DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( title: Text("TabBar"), bottom: TabBar( tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ], ), ), ),);TabBar 默认将会在 Widget 树中向上寻找离它最近的一个 DefaultTabController 节点作为本人的 TabController。如果您想手动创立 TabController，那么您必须将它作为参数传给 TabBar。
步骤三：为每个Tab创立内容
当初咱们曾经胜利创立了一些 tabs，接下来要实现的是 tab 被选中时显示其对应的内容。为了实现这个成果，咱们将应用 TabBarView widget。
import 'package:flutter/material.dart';class TabBarExample extends StatefulWidget { @override _TabBarExampleState createState() => _TabBarExampleState();}class _TabBarExampleState extends State<TabBarExample> { @override Widget build(BuildContext context) { return DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( title: Text("TabBar"), bottom: TabBar( tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ], ), ), body: TabBarView( children: [ Icon(Icons.directions_bike), Icon(Icons.directions_boat), Icon(Icons.directions_car), ], ), ), ); }}从下面这个小例子中咱们简略的体验了一下 TabBar 是怎么联合 TabBarView 来应用的。
DEMO成果
TabBar属性和阐明
总共20个属性
| 字段 | 属性 | 形容 |
|---|---|---|
| tabs | List<Widget> | 两个多个的Tab列表 |
| controller | TabController | 管制tab的控制器 |
| isScrollable | bool | 标签栏是否能够程度滚动 |
| indicatorColor | Color | 设置选中Tab指示器的色彩 |
| automaticIndicatorColorAdjustment | bool | 是否主动调整indicatorColor |
| indicatorWeight | double | 设置选中Tab指示器线条的粗细 |
| indicatorPadding | EdgeInsetsGeometry | 设置选中Tab指示器间距，默认值为 EdgeInsets.zero |
| indicator | Decoration | 设置选中Tab指示器的外观 |
| indicatorSize | TabBarIndicatorSize | 设置选中Tab指示器的大小 |
| labelColor | Color | 设置选中Tab文字的色彩 |
| labelStyle | TextStyle | 设置选中Tab文字的款式 |
| labelPadding | EdgeInsetsGeometry | 设置选中Tab文字的间距 |
| unselectedLabelColor | Color | 设置未选中Tab文字的色彩 |
| unselectedLabelStyle | TextStyle | 设置未选中Tab文字的款式 |
| dragStartBehavior | DragStartBehavior | 解决拖动开始行为的形式 |
| overlayColor | MaterialStateProperty<Color> | 定义响应焦点、悬停和飞溅色彩 |
| mouseCursor | MouseCursor | 鼠标指针进入或悬停在鼠标指针上时的光标 |
| enableFeedback | bool | 检测到的手势是否应提供声音和/或触觉反馈 |
| onTap | ValueChanged<int> | 单击Tab时的回调 |
| physics | ScrollPhysics | TabBar的滚动视图如何响应用户输出 |
TabBar属性具体应用
1、tabs
由两个多个组成的Tab列表
应用办法
TabBar( tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)2、controller
能够管制tab的控制器
应用办法
TabController _tabController;@overridevoid initState() { // TODO: implement initState super.initState(); _tabController = TabController(length: 3, vsync: this);}TabBar( controller: _tabController, tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)3、isScrollable
标签栏是否能够程度滚动
应用办法
TabBar( isScrollable: false, tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)4、indicatorColor
设置选中Tab指示器的色彩
应用办法
TabBar( indicatorColor: Colors.red, tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)5、automaticIndicatorColorAdjustment
是否主动调整 indicatorColor，如果 automaticIndicatorColorAdjustment 为 true 时，那么indicatorColor 会主动调整成 Colors.white
应用办法
TabBar( automaticIndicatorColorAdjustment: false, tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)6、indicatorWeight
设置选中Tab指示器线条的粗细
应用办法
TabBar( indicatorColor: Colors.red, indicatorWeight: 5, tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)7、indicatorPadding
设置选中Tab指示器间距，默认值为 EdgeInsets.zero
应用办法
TabBar( indicatorColor: Colors.red, indicatorWeight: 5, indicatorPadding: EdgeInsets.only(bottom: 2), tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)8、indicator
设置选中Tab指示器的外观
应用办法
TabBar( indicatorColor: Colors.red, indicatorWeight: 5, indicatorPadding: EdgeInsets.only(bottom: 2), indicator: BoxDecoration( gradient: LinearGradient(colors: [ Colors.orange, Colors.green ]), ), tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)9、indicatorSize
设置选中Tab指示器的大小，该值是一个枚举类型，TabBarIndicatorSize.tab 追随 Tab 的宽度，TabBarIndicatorSize.label 追随 Tab 内容文字的宽度。
应用办法
TabBar( indicatorColor: Colors.red, indicatorSize: TabBarIndicatorSize.tab, tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)10、labelColor
设置选中Tab文字的色彩
应用办法
TabBar( indicatorColor: Colors.red, labelColor: Colors.pink, tabs: [ Tab(icon: Icon(Icons.directions_bike),), Tab(icon: Icon(Icons.directions_boat),), Tab(icon: Icon(Icons.directions_car),), ],)11、labelStyle
设置选中Tab文字的款式
应用办法
TabBar( labelStyle: TextStyle( backgroundColor: Colors.green, fontSize: 20 ), tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)12、labelPadding
设置选中Tab内容的间距
应用办法
TabBar( labelStyle: TextStyle( backgroundColor: Colors.green, fontSize: 20 ), labelPadding: EdgeInsets.all(0), tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)13、unselectedLabelColor
设置未选中Tab文字的色彩
应用办法
TabBar( unselectedLabelColor: Colors.orange, tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)14、unselectedLabelStyle
设置未选中Tab文字的款式
应用办法
TabBar( unselectedLabelColor: Colors.orange, unselectedLabelStyle: TextStyle( backgroundColor: Colors.pink ), tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)15、dragStartBehavior
解决拖动开始行为的形式
应用办法
TabBar( unselectedLabelColor: Colors.orange, unselectedLabelStyle: TextStyle( backgroundColor: Colors.pink ), dragStartBehavior: DragStartBehavior.start, tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)16、overlayColor
定义响应焦点、悬停和飞溅色彩。
如果非空，则会应用 MaterialState.focused, MaterialState.hovered, and MaterialState.pressed 之一进行解析。
17、mouseCursor
鼠标指针进入或悬停在鼠标指针上时的光标，针对 Flutter web 利用。
应用办法
TabBar( unselectedLabelColor: Colors.orange, unselectedLabelStyle: TextStyle( backgroundColor: Colors.pink ), mouseCursor: SystemMouseCursors.allScroll, tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)18、enableFeedback
检测到的手势是否应提供声音和/或触觉反馈，默认为 true
应用办法
TabBar( enableFeedback: true, tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)19、onTap
单击Tab时的回调
应用办法
TabBar( enableFeedback: true, onTap: (index) { print(index); }, tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)20、physics
TabBar的滚动视图如何响应用户输出，
例如，确定在用户进行拖动滚动视图后滚动视图如何持续动画。
应用办法
TabBar( physics: NeverScrollableScrollPhysics(), tabs: [ Tab(icon: Icon(Icons.directions_bike), text: "单车",), Tab(icon: Icon(Icons.directions_boat), text: "轮船",), Tab(icon: Icon(Icons.directions_car), text: "汽车",), ],)总结
以上是 TabBar 的属性具体解析并写了一个简略的 demo ，在平时的开发过程中 TabBar
组件用的还是绝对比拟频繁的，也是开发人员必须把握的一个组件。