产品设计要求
image.png技术参数
实现代码
涉及到的主要控件TabController
关键是TabBar中的Tab组件中采用column嵌套实现上下结构的两个Text
initialIndex:activeTabIndex初始化默认选中的tab
_tabController = TabController(initialIndex:activeTabIndex,length: 3, vsync: this);
利用onTap()来动态渲染选中的效果
@override
void initState() {
super.initState();
tabController = TabController(length: list.length, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("我的工作计划", style: TextStyle(color: Colors.white)),
leading: Builder(builder: (context) {
return IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
onPressed: () {
Scaffold.of(context).openDrawer();
},
);
}),
actions: <Widget>[
IconButton(
icon: Icon(Icons.home),
color: Colors.white,
onPressed: () {},
),
],
bottom: PreferredSize(
preferredSize: Size.fromHeight(48),
child: Material(
//这里设置tab的背景色
color: Colors.white,
child: TabBar(
// tabs: list.map((e) => PreferredSize(preferredSize: Size.fromHeight(42),
// child:Material(child:Text(e),))).toList(),
indicatorColor: Color(0xff1890ff),
tabs: buildTabs(),
controller: tabController,
onTap: (index){
setState(() {
selectTabIndex=index;
});
},
),
),
),
),
//drawer: MyDrawer(),
body: TabBarView(
controller: tabController,
children: list.map((e) {
return Container(
alignment: Alignment.center,
child: Text(e),
);
}).toList(),
),
);
}
List<Widget> buildTabs() {
List<Widget> tabs = [
PreferredSize(
preferredSize: Size.fromHeight(42),
child: Material(
child: Column(
children: [
Text(
"12",
style: TextStyle(
color: 0==selectTabIndex?activeColor:unActiveColor,
//fontWeight: FontWeight.w400,
fontSize: 18),
),
Text(
"全部",
softWrap: false,
overflow: TextOverflow.fade,
style: TextStyle(color: 0==selectTabIndex?activeColor:unActiveColor,),
),
],
),
)),
PreferredSize(
preferredSize: Size.fromHeight(42),
child: Material(
child: Column(
children: [
Text("4",style: TextStyle(
color: 1==selectTabIndex?activeColor:unActiveColor,
//fontWeight: FontWeight.w400,
fontSize: 18),),
Text("临期",style: TextStyle(
color: 1==selectTabIndex?activeColor:unActiveColor,
),),
],
),
)),
PreferredSize(
preferredSize: Size.fromHeight(42),
child: Material(
child: Column(
children: [
Text("3",style: TextStyle(
color: 2==selectTabIndex?activeColor:unActiveColor,
//fontWeight: FontWeight.w400,
fontSize: 18),),
Text("超期",style: TextStyle(
color: 2==selectTabIndex?activeColor:unActiveColor,
),),
],
),
)),
];
return tabs;
}
实现效果
image.pngTabar的默认效果
参考Tab的参数设置
List<Widget> tabs = [
Tab(text: '全部',icon: Icon(Icons.list),),
Tab(text: '临期',icon: Icon(Icons.lock_clock),),
Tab(text: '超期',icon: Icon(Icons.timer),),
];
image.png
网友评论