Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController
程序员文章站
2022-05-18 21:00:28
上一篇我们说了BottmNavigationBar底部导航组件,今天来学习一下顶部导航组件TabBar,TabBar选项卡一般位于AppBar下方,通常和TabBar(顶部导航选项卡)一起使用的有TabBarView和TabController。
TabBar:Tab页的选项组件,默认为水平排... ......
如需转载,请注明出处: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 = 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设置各种属性来满足需求。