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的控制器，它是关联这两个组件的桥梁。

tabbar组件常见属性

属性名	类型	说明
isscrollable	bool	是否可以水平移动
tabs	list<widget>	tab选项列表

 

 

 

 

 

tab组件常见属性

属性名	类型	说明
icon	widget	tab图标
text	string	tab文本

 

 

 

 

 

tabbarview组件常见属性

属性名	类型	说明
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 = 0,
    @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设置各种属性来满足需求。