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	Tab选项列表

 

 

 

 

 

Tab组件常见属性

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

 

 

 

 

 

TabBarView组件常见属性

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

 

 

 

 

 

 

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

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
 final List _myTabs = [
 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: [
 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: [
 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设置各种属性来满足需求。