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

作者：习惯了_就好
来源：简书