更改所选标签的图标颜色 [英] Change tab icon color on selected
本文介绍了更改所选标签的图标颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有带有图标和文字的TabBar:
I have TabBar with icon and text:
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelStyle: TextStyle(fontSize: 13.0),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: const Color(0xFF62A6E9)),
tabs: [
Tab(icon: SvgPicture.asset(
'assets/trending.svg',
color: const Color(0xFF71768D),
width: 15,
height: 15
), text: "Популярное"),
Tab(icon: SvgPicture.asset(
'assets/new.svg',
color: const Color(0xFF71768D),
width: 15,
height: 15
), text: "Новые"),
Tab(icon: SvgPicture.asset(
'assets/comingsoon.svg',
color: const Color(0xFF71768D),
width: 15,
height: 15
), text: "Ожидаемые"),
],
),
我需要更改所选标签图标的颜色,SvgPicture具有填充图标的颜色属性
I need change selected tab icon color, SvgPicture have color attribute for fill icon
推荐答案
您需要为所选选项卡提供一个TabController,并且可以在TabController的索引的基础上更改颜色.
You need to provide a TabController for your selected tabs and on the basis of TabController's index, you can change the color.
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: 3);
_tabController.addListener(_handleTabSelection);
}
void _handleTabSelection() {
setState(() {
});
}
TabBar(
controller: _tabController,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelStyle: TextStyle(fontSize: 13.0),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: const Color(0xFF62A6E9)),
tabs: [
Tab(icon: SvgPicture.asset(
'assets/trending.svg',
color: _tabController.index == 0
? Colors.black
: Color(0xFF71768D),
width: 15,
height: 15
), text: "Популярное"),
Tab(icon: SvgPicture.asset(
'assets/new.svg',
color: _tabController.index == 1
? Colors.black
: Color(0xFF71768D),
width: 15,
height: 15
), text: "Новые"),
Tab(icon: SvgPicture.asset(
'assets/comingsoon.svg',
color: _tabController.index == 2
? Colors.black
: Color(0xFF71768D),
width: 15,
height: 15
), text: "Ожидаемые"),
请也处理TabController.
Please dispose the TabController as well.
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
这篇关于更改所选标签的图标颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文