Flutter中的TabBar

1. 基本介绍

   TabBar、TabBarView，TabController 提供了常见的多Tab切换的功能，例如电商网站上方横划的服装、家具、电子产品… 等切换页面，然后点击对应 tab 切换到不同专场这种功能。

2. 属性介绍

   TabBar属性	介绍
   controller	TabController，控制联动
   isScrollable	是否可以滚动，默认为 false
   indicatorColor	指示器颜色
   indicatorWeight	指示器宽度
   indicatorPadding	指示器间距 EdgeInsets.zero
   indicator	自定义指示器
   indicatorSize	指示器大小
   labelColor	title 颜色
   labelStyle	title 样式
   labelPadding	title 间距
   unselectedLabelColor	未选中 title 颜色
   unselectedLabelStyle	未选中 title 样式
   dragStartBehavior	拖拽设置，默认为 DragStartBehavior.start
   mouseCursor	鼠标悬停
   onTap	点击事件
   physics	滑动效果，如滑动到末端时，继续拉动，使用 ClampingScrollPhysics 实现Android下微光效果。使用 BouncingScrollPhysics 实现iOS下弹性效果。

3. 代码示例

   import 'package:flutter/material.dart';
   
   class TabBarExampleWidget extends StatefulWidget {
     @override
     TabBarExampleState createState() => TabBarExampleState();
   }
   
   class TabBarExampleState extends State<TabBarExampleWidget> {
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       return DefaultTabController(
         length: 5,
         child: Scaffold(
           appBar: AppBar(
             title: Text('TabBar'),
             bottom: _tabBar(),
           ),
           body: Container(
             color: Colors.grey,
           ),
         ),
       );
     }
   
     TabBar _tabBar(){
       return TabBar(
         tabs: [
           Tab(
             text: "tab1",
           ),
           Tab(
             text: "tab2",
           ),
           Tab(
             text: "tab3",
           ),
           Tab(
             text: "tab4",
           ),
           Tab(
             text: "tab5",
           ),
         ],
       );
     }
   }

4. 小结

• TabController的length 一定要赋值，并且与 tabs 的数量相同，不然会报错。
• isScrollable 默认为 false，设置为 true 才可以滑动，否则数据过多时，可能会自适应效果，导致 title 被挤压。
• labelStyle中设置颜色无效 需要设置labelColor属性。