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设置各种属性来满足需求。

 

posted @ 2019-08-17 17:40  CurtisWgh  阅读(13119)  评论(0编辑  收藏  举报