1、环境版本
Flutter版本:3.16.9
开发IDE:android studio 2023.1.1 Patch2
以下代码在Android中测试通过,iOS没有试过。以后升级啥的可能会和本方案会有出入,请自行甄别。
2、实现需求
需要在下图红色圈出的区域加点自定义的内容,比如图标、统计信息等。但网上找了好久没有合适的,难道没新手遇到这类需求?
3、实现代码示例
上图配套TabBar的实现代码:
appBar: AppBar(
centerTitle: true,
title:Text("202-33潘*珍的报警"),
actions: [
IconButton(
icon: Icon(Icons.filter_alt_outlined,color: Colors.black,),
onPressed: (){},
)
],
backgroundColor: const Color(0xFFff803a),
bottom: TabBar(
isScrollable:true,
labelStyle: const TextStyle(fontSize: 20,color:Colors.white),
unselectedLabelStyle: const TextStyle(fontSize: 16,color:Colors.black),
tabs: alarmTabs, //见下面变量赋值部分
indicatorColor:Colors.yellow[100],
)
/// 以下代码写在变量定义区域,本文为方便,合在一起了
late List<Tab> alarmTabs = <Tab>[
Tab(text: '全部'),
Tab(text: '生理'),
Tab(text: '动作'),
Tab(text: '异常检测'),
Tab(text: '设备'),
];
要在Title和TabBar中间加内容,这时就要用到PreferredSize组件了,用了之后效果如下,示例仅加了个图标进去,加增加复杂的统计信息,查询控件等,请自行在child中增加,非常方便,上效果:
只要把AppBar中的bottom属性原来放TabBar处换成RreferredSize,代码见下:
bottom: PreferredSize(
preferredSize: Size(size.width,110),
child: Column(
children: [
Container(
width: size.width,
height: 60,
padding: const EdgeInsets.only(top:0),
child: Column(
children: [
Icon(Icons.notification_important_outlined,size: 50,color:Colors.deepOrange[700]),
],
),
),
TabBar(
isScrollable:true,
labelStyle: const TextStyle(fontSize: 20,color:Colors.white),
unselectedLabelStyle: const TextStyle(fontSize: 16,color:Colors.black),
tabs: alarmTabs,
indicatorColor:Colors.yellow[100],
)
],
),
)
要改显示内容,修改下图红色圈出部分,换成你自己的Widget布局即可。
4、总结
版本更迭蛮快的,使用时要结合新的版本特性。