Flutter学习笔记（17）--顶部导航TabBar、TabBarView、DefaultTabController

如需转载，请注明出处：Flutter学习笔记（17）--顶部导航TabBar、TabBarView、DefaultTabController

上一篇我们说了BottmNavigationBar底部导航组件，今天来学习一下顶部导航组件TabBar，TabBar选项卡一般位于AppBar下方，通常和TabBar（顶部导航选项卡）一起使用的有TabBarView和TabController。

TabBar：Tab页的选项组件，默认为水平排列。

TabBarView：Tab页的内容容器，Tab页内容一般处理为随选项卡的改变而改变。

TabController：TabBar和TabBarView的控制器，它是关联这两个组件的桥梁。

属性名	类型	说明
isScrollable	bool	是否可以水平移动
tabs	List<Widget>	Tab选项列表

属性名	类型	说明
icon	Widget	Tab图标
text	String	Tab文本

属性名	类型	说明
controller	TabController	指定视图的控制器
children	List<Widget>	视图组件的child为一个列表，一个选项卡对应一个视图

上面我们说的TabController，与其并列的还有DefaultTabController，两者的区别是TabController一般放在有状态组件中使用，而DefaultTabController一般放在无状态组件中使用。

下面通过DefalutTabController来关联TabBar和TabBarView来实现一个Demo：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  final List<Tab> _myTabs = <Tab>[
    Tab(text: '选项一',icon: Icon(Icons.add_shopping_cart),),
    Tab(text: '选项二',icon: Icon(Icons.wifi_tethering),),
    Tab(text: '选项三',icon: Icon(Icons.airline_seat_flat_angled),)
  ];
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TabBar Demo',
      home: new Scaffold(
        body: DefaultTabController(
            length: _myTabs.length,
            initialIndex: 1,
            child: Scaffold(
              appBar: new AppBar(
                title: new Text('TabBar Demo'),
                leading: Icon(Icons.menu),
                actions: <Widget>[
                  Icon(Icons.search)
                ],
                bottom: new TabBar(
                  tabs: _myTabs,
                  indicatorColor: Colors.black,
                  indicatorWeight: 5,
                  indicatorSize: TabBarIndicatorSize.label,
                  labelColor: Colors.limeAccent,
                  unselectedLabelColor: Colors.deepOrange,
                ),
              ),
              body: new TabBarView(
                  children: _myTabs.map((Tab tab){
                    return Center(
                        child: new Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(Icons.tab),
                            Text(tab.text)
                          ],
                      ),
                    );
                  }).toList(),
              ),
            )
        ),
      ),
    );
  }
}

效果截图：

接下来分别看一下DefaultTabController、TabBar、TabBarView的构造函数有什么：

• DefaultTabController

  const DefaultTabController({

    Key key,

    @required this.length,

    this.initialIndex = ,

    @required this.child,

  }) : assert(initialIndex != null),

       super(key: key);

• 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.tab：跟每个tab等宽，TabBarIndicatorSize.label：跟文字等宽

    this.labelColor,//选中label的颜色

    this.labelStyle,//选中label的样式

    this.labelPadding,每个label的padding

    this.unselectedLabelColor,//未选中label的颜色

    this.unselectedLabelStyle,//未选中label的样式

  }) : assert(tabs != null),

       assert(isScrollable != null),

       assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),

       assert(indicator != null || (indicatorPadding != null)),

       super(key: key);

• TabBarView

  const TabBarView({

    Key key,

    @required this.children,//Tab页内容组件的数组集合

    this.controller,//TabController对象

    this.physics,

  }) : assert(children != null), super(key: key);

总结一下使用吧：一般流程就是初始化tabs的List列表，先把选项卡的选项初始化出来，接下来就是DefaultTabController把TabBar和TabBarView关联起来，最后就是给TabBar和TabBarView设置各种属性来满足需求。