Flutter-TabBar的使⽤说明Flutter-TabBar的使⽤说明
嗨哒哥 2020-02-18 16:26:43  306  收藏
分类专栏： Flutter专题
版权
Flutter-TabBar的使⽤说明
在AppBar中有⼀个⾮常重要的Widget，这个Widget就是bottom，bottom是⼀个抽象类PreferredSizeWidget，可以看到⼀共有5个Widget 继承了它：
这⾥讲解使⽤TabBar这⼀种情况
TabBar的使⽤需要结合AppBar，现在给出AppBar的使⽤说明地址：AppBar的使⽤说明
TabBar的定义
TabBar在使⽤之前，⾸先需要熟悉他的定义属性，现在查看常⽤定义属性：
const TabBar({
Key key,
@required this.tabs,//必须实现的，设置需要展⽰的tabs，最少需要两个
this.isScrollable = false,//是否需要滚动，true为需要
this.indicatorColor,//选中下划线的颜⾊
this.indicatorWeight = 2.0,//选中下划线的⾼度，值越⼤⾼度越⾼，默认为2
this.indicatorPadding = ,
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,
})
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: d),
flutter开发app),
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: d, 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('$index');
},
unselectedLabelColor: ,//设置未选中时的字体颜⾊，tabs⾥⾯的字体样式优先级最⾼
unselectedLabelStyle: TextStyle(fontSize: 20),//设置未选中时的字体样式，tabs⾥⾯的字体样式优先级最⾼
labelColor: Colors.black,//设置选中时的字体颜⾊，tabs⾥⾯的字体样式优先级最⾼
labelStyle: TextStyle(fontSize: 20.0),//设置选中时的字体样式，tabs⾥⾯的字体样式优先级最⾼
isScrollable: true,//允许左右滚动
indicatorColor: d,//选中下划线的颜⾊
indicatorSize: TabBarIndicatorSize.label,//选中下划线的长度，label时跟⽂字内容长度⼀样，tab时跟⼀个Tab的长度⼀样                indicatorWeight: 6.0,//选中下划线的⾼度，值越⼤⾼度越⾼，默认为2。0
//                indicator: BoxDecoration(),//⽤于设定选中状态下的展⽰样式
tabs: [
Text('精选',style: TextStyle(
color: ,
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('');
}
),
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: (){print('');}),              IconButton(icon: Icon(Ic
ons.history), onPressed: (){print('');}),            ],
),
body: TabBarView(
children: [
Text('精选'),
Text('猜你喜欢'),
Text('母婴'),
Text('⼉童'),
Text('⼥装'),
Text('百货'),
Text('美⾷'),
Text('美妆'),
Text('母婴'),
Text('⼉童'),
Text('⼥装'),
Text('百货'),
Text('美⾷'),

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。