我正在尝试更改BottomNavigation图标的选定颜色,但我似乎要实现的只是更改文本颜色 . 请协助:
目前,文本颜色在选中时会变为黄色,但图标会保持白色,我希望它也是黄色的,我尝试将非活动图标的图标颜色设置为灰色,如 Headers 但它没有变形 .
这是我的代码:
new Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.black,
splashColor: Colors.yellowAccent,
unselectedWidgetColor: Colors.green,
primaryColor: Colors.red,
textTheme: Theme.of(context).textTheme.copyWith(caption: new TextStyle(color: Colors.grey))
),
child: new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: const Icon(Icons.add_shopping_cart, color: Colors.white,),
title: new Text("Services"),
),
new BottomNavigationBarItem(
icon: new Theme(
data: new ThemeData(
),
child: const Icon(Icons.calendar_today, color: Colors.white,)),
title: new Text("Appointment")
),
new BottomNavigationBarItem(
icon: const Icon(Icons.face, color: Colors.white,),
title: new Text("Profile")
)
],
currentIndex: index,
onTap: (int i){setState((){index = i;});},
fixedColor: Colors.yellowAccent,
type: BottomNavigationBarType.fixed,
),
)
1 回答
您已为每个图标明确设置
color: Colors.white
,因此它们将为白色,否则您将设置它们 .你有几个选择:
1)将BottomNavigationBar的类型设置为
type: BottomNavigationBarType.fixed
并设置fixedColor: Colors.orange
或您想要的任何颜色 . 请注意,您必须删除color: Colors.white
,否则它们仍然是白色的 .2)您可以测试正确设置的索引,然后决定将图标直接设置为哪种颜色,即第一项为
color = index == 0 ? selectedColor : unselectedColor
,第二项为index==1
,第三项为item==2
.3)稍微替代的方法是在整个BottomNavigationBar周围设置一个带有color = unselectedColor的IconTheme,然后只用
color = index == 0 ? selectedColor : null
设置所选项目 .我建议阅读BottomNavigationBar documentation,特别是关于固定与移位的部分,因为它描述了你所遇到的确切问题的答案 .