当前位置: 萬仟网 > IT编程>移动开发>Android > Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController

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

2019年08月18日 18:20  | 萬仟网IT编程  | 我要评论

如需转载,请注明出处: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设置各种属性来满足需求。

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com