欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

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(),
),
)
),
),
);
}
}
 

 

 

效果截图:

Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController

接下来分别看一下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设置各种属性来满足需求。