我正在尝试更改BottomNavigation图标的选定颜色,但我似乎要实现的只是更改文本颜色。请协助:
目前,文本颜色在选中时会变为黄色,但图标会保持白色,我希望它也是黄色的,我尝试将非活动图标的图标颜色设置为灰色,就像标题一样,但它没有变形。
这是我的代码:
.color-change:hover {
background:#fc9426;
}
答案 0 :(得分:4)
请勿在{{1}}中声明图标的颜色。
您应该在BottomNavigationBarItem
中将其声明为BottomNavigationBar
和unselectedItemColor
。
unselectedItemColor
这样做,您的代码将起作用。
答案 1 :(得分:1)
您已为每个图标明确设置color: Colors.white
,因此在您设置之前它们将为白色。
您有几个选择:
1)将BottomNavigationBar的类型设置为type: BottomNavigationBarType.fixed
并设置fixedColor: Colors.orange
或您想要的任何颜色。请注意,您必须删除color: Colors.white
,否则它们仍为白色。
2)您可以测试正确设置的索引,然后决定将图标直接设置为哪种颜色,即第一项为color = index == 0 ? selectedColor : unselectedColor
,第二项为index==1
,{{1第三个。
3)稍微替代方法是在整个BottomNavigationBar周围设置一个带有color = unselectedColor的IconTheme,然后只用item==2
设置所选项目。
我建议阅读BottomNavigationBar documentation,特别是关于固定与移位的部分,因为它描述了您遇到的确切问题的答案。