如何解决点击时如何更改标签栏颜色
点击后,我想更改标签的背景颜色吗? 如何更改颜色 我有这个测试项目:
false
解决方法
您可以使用控制器的index
属性来检查哪个选项卡当前处于活动状态,并收听控制器以了解其更改时间。
例如,通过在标签窗口小部件周围使用AnimatedBuilder
要考虑的这些事情:
- 使用选项卡控制器并检查indexIsChanging
- 使用小部件将Tab内的文本换行以更改颜色
- 删除labelPadding
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
TabController tabController;
List<Color> tabBackground;
List colors = [Colors.red,Colors.green,Colors.yellow];
Random random = Random();
@override
void initState() {
super.initState();
tabController = TabController(length: 3,vsync: this);
tabBackground = [Colors.blue,Colors.pink,Colors.cyan];
tabController.addListener(() {
if (tabController.indexIsChanging) {
setState(() {
tabBackground[tabController.index] = colors[random.nextInt(3)];
});
}
});
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,bottom: TabBar(
labelPadding: EdgeInsets.zero,labelColor: Colors.yellow,indicatorColor: Colors.black,controller: tabController,tabs: [
Tab(
child: Container(
alignment: Alignment.center,constraints: BoxConstraints.expand(),color: tabBackground[0],child: Text(
'Tab 1',style: TextStyle(
color: Colors.white,),Tab(
child: Container(
alignment: Alignment.center,color: tabBackground[1],child: Text(
'Tab 2',color: tabBackground[2],child: Text(
'Tab 3',],title: Text('Tabs Demo'),body: TabBarView(
controller: tabController,children: List<Widget>.generate(3,(int index) {
return Center(
child: Text(index.toString()),);
}),);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。