【Flutter学习】基本组件之TabBar顶部导航

一，概述

　　TabBar，是材料设计(Material design)中很常用的一种横向标签页。在Android原生开发中，我们常用ViewPage或者一些常用的标签页开源库，来实现并行界面的横向滑动展示，在iOS原生开发中我们可以基于UICollectionView/UIButton来封装实现这一功能，在Flutter的世界中，TabBar是被定义在Material Component中，所以他的使用需要在MaterialApp中。通常，我们会在AppBar的底部部分结合TabBarView来使用TabBar。
　　　　

二，Tab关键元素

• TabController
  这是Tab页的控制器，用于定义Tab标签和内容页的坐标，还可配置标签页的切换动画效果等。
  TabController一般放入有状态控件中使用，以适应标签页数量和内容有动态变化的场景，如果标签页在APP中是静态固定的格局，则可以在无状态控件中加入简易版的DefaultTabController以提高运行效率，毕竟无状态控件要比有状态控件更省资源，运行效率更快。

• TabBar
  Tab页的Title控件，切换Tab页的入口，一般放到AppBar控件下使用，内部有*Title属性。其子元素按水平横向排列布局，如果需要纵向排列，请使用Column或ListView控件包装一下。子元素为Tab类型的数组。

• TabBarView
  Tab页的内容容器，其内放置Tab页的主体内容。子元素可以是多个各种类型的控件。

三，构造函数　　

• TabController

 *  **DefalutTabController**  
        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  
        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,
              );

• 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);
     */
 *  **Tab**  
        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);

• TabBarView

    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);

四，创建标签栏

• 1.创建TabController

  • 使用默认的DefaultController

        /**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(),
                  ),
                ),
            );
          }
 *  使用自定义的TabController的  
        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('巴士')),
                ],
              ),
            );
          }

• 2.构建Tab数据/TabBarView数据

    /**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: '闹钟',
          )
      ];

• 1. 创建Tabbar

    appBar:new AppBar(
                title: new Text('顶部标签栏'),
                bottom: new TabBar(
                  tabs: myTabs, //标签数组
                  indicatorColor: Colors.blue,//指示器的颜色
                  isScrollable: true,//是否滑动
                ),
    )

• 4.绑定TabBar 和 TabBarView

    /**3.绑定Tabbar 和 TabBarView */
              //body
              body: new TabBarView(
                children: myTabs.map((Tab tab){
                    return new Center( child: new Text(tab.text));
                }).toList(),
              ),

• 5.全部代码

    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有两种方式：

• 第一种：使用系统自带的DefaultTabController，在Scaffold套一层DefaultTabController，这种方式TabBarView会自动查找这个tabController。

    @override
    Widget build(BuildContext context) {
       return new DefaultTabController();
    }

• 第二种是自己定义一个TabController，实现SingleTickerProviderStateMixin

    参考上面“使用自定tabcontroller代码”

转载于//www.cnblogs.com/lxlx1798/p/11078901.html