Flutter-TabBar的使用说明_flutter tabbar

TabBar的使用需要结合AppBar，现在给出AppBar的使用说明地址：AppBar的使用说明

TabBar的定义

---

TabBar在使用之前，首先需要熟悉他的定义属性，现在查看常用定义属性：

const TabBar({

Key key,

@required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个

this.controller,

this.isScrollable = false,//是否需要滚动，true为需要

this.indicatorColor,//选中下划线的颜色

this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2

this.indicatorPadding = EdgeInsets.zero,

this.indicator,//用于设定选中状态下的展示样式

this.indicatorSize,//选中下划线的长度，label时跟文字内容长度一样，tab时跟一个Tab的长度一样

this.labelColor,//设置选中时的字体颜色，tabs里面的字体样式优先级最高

this.labelStyle,//设置选中时的字体样式，tabs里面的字体样式优先级最高

this.labelPadding,

this.unselectedLabelColor,//设置未选中时的字体颜色，tabs里面的字体样式优先级最高

this.unselectedLabelStyle,//设置未选中时的字体样式，tabs里面的字体样式优先级最高

this.dragStartBehavior = DragStartBehavior.start,

this.onTap,//点击事件

})

TabBar的使用

===================================================================

TabBar在使用的过程中有点类似于新闻或者电商样式中有关导航条下面有一个可以滚动的一行按钮；现在给出演示代码：

Widget _appBar_bottom_demo() {

return MaterialApp(

home: DefaultTabController(

length: 14,

child: Scaffold(

appBar: AppBar(

primary: true,//为false的时候会影响leading，actions、titile组件，导致向上偏移

textTheme: TextTheme(//设置AppBar上面各种字体主题色

// title: TextStyle(color: Colors.red),

),

actionsIconTheme: IconThemeData(color: Colors.blue,opacity: 0.6),//设置导航右边图标的主题色，此时iconTheme对于右边图标颜色会失效

iconTheme: IconThemeData(color: Colors.black,opacity: 0.6),//设置AppBar上面Icon的主题颜色

brightness: Brightness.dark,//设置导航条上面的状态栏显示字体颜色

backgroundColor: Colors.amber,//设置背景颜色

// shape: CircleBorder(side: BorderSide(color: Colors.red, width: 5, style: BorderStyle.solid)),//设置appbar形状

// automaticallyImplyLeading: true,//在leading为null的时候失效

// bottom: PreferredSize(child: Text(‘data’), preferredSize: Size(30, 30)),//出现在导航条底部的按钮

bottom: TabBar(

onTap: (int index){

print(‘Selected…$index’);

},

unselectedLabelColor: Colors.grey,//设置未选中时的字体颜色，tabs里面的字体样式优先级最高

unselectedLabelStyle: TextStyle(fontSize: 20),//设置未选中时的字体样式，tabs里面的字体样式优先级最高

labelColor: Colors.black,//设置选中时的字体颜色，tabs里面的字体样式优先级最高

labelStyle: TextStyle(fontSize: 20.0),//设置选中时的字体样式，tabs里面的字体样式优先级最高

isScrollable: true,//允许左右滚动

indicatorColor: Colors.red,//选中下划线的颜色

indicatorSize: TabBarIndicatorSize.label,//选中下划线的长度，label时跟文字内容长度一样，tab时跟一个Tab的长度一样

indicatorWeight: 6.0,//选中下划线的高度，值越大高度越高，默认为2。0

// indicator: BoxDecoration(),//用于设定选中状态下的展示样式

tabs: [

Text(‘精选’,style: TextStyle(

color: Colors.green,

fontSize: 16.0

),),

Text(‘猜你喜欢’,style: TextStyle(

color: Colors.indigoAccent,

fontSize: 16.0

),),

Text(‘母婴’),

Text(‘儿童’),

Text(‘女装’),

Text(‘百货’),

Text(‘美食’),

Text(‘美妆’),

Text(‘母婴’),

Text(‘儿童’),

Text(‘女装’),

Text(‘百货’),

Text(‘美食’),

Text(‘美妆’),

]

),

centerTitle: true,

title: Text(‘AppBar Demo’),

leading: IconButton(

icon: Icon(Icons.add),

onPressed: (){

print(‘add click…’);

}

),

actions: [

IconButton(icon: Icon(Icons.search), onPressed: (){print(‘search…’);}),

IconButton(icon: Icon(Icons.history), onPressed: (){print(‘history…’);}),

],

),

写在最后

本次我的分享也接近尾声了，感谢你们在百忙中花上一下午来这里聆听我的宣讲，希望在接下来的日子，我们共同成长，一起进步！！！

最后放上一个大概的Android学习方向及思路（详细的内容太多了~），提供给大家：

对于程序员来说，要学习的知识内容、技术有太多太多，这里就先放上一部分，其他的内容有机会在后面的文章向大家呈现出来，不过我自己所有的学习资料都整理成了一个文档，一直在不断学习，希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！希望读到这的您能点个小赞和关注下我，以后还会更新技术干货，谢谢您的支持！

Android架构师之路很漫长，一起共勉吧！

如果你觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言，一定会认真查询，修正不足，谢谢。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
*

Android架构师之路很漫长，一起共勉吧！

如果你觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言，一定会认真查询，修正不足，谢谢。

[外链图片转存中…(img-nq092IOs-1714814230087)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！