Flutter BottomNavigationBar颜色

Question

我正在尝试更改BottomNavigation图标的选定颜色，但是我似乎要实现的就是更改文本颜色。请协助：

目前，当选中时，文本颜色变为黄色，但图标仍保持白色，我也希望它也变为黄色，并且我尝试将非活动图标的图标颜色设置为灰色，如标题所示，但没有变化。

这是我的代码：

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,
        ),
      )

Answer 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文档，尤其是有关固定与移动的部分，因为它描述了您所遇到的确切问题的答案。

Answer 2

不要在里面声明图标的颜色BottomNavigationBarItem。您应该将其声明BottomNavigationBar为unselectedItemColorand unselectedItemColor。

    bottomNavigationBar: BottomNavigationBar(
    unselectedItemColor: Colors.green,
    selectedItemColor: Colors.yellow,
    items:[ 
    new BottomNavigationBarItem(icon:Icon(Icons.add_shopping_cart))
    ]

通过这样做，您的代码将起作用。