Flutter BottomNavigationBar颜色 [英] Flutter BottomNavigationBar Colors

问题描述

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

当前选中时文本颜色变为黄色，但图标仍为白色，我也希望它也为黄色，并且我尝试设置图标的颜色无效的图标会变成灰色，就像标题一样，但它不会出现变化。

这是我的代码：

 新主题（
数据：Theme.of（context）.copyWith（
 canvasColor：Colors.black，
 splashColor：Colors.yellowAccent，
 unselectedWidgetColor：Colors.green，
 primaryColor：Colors.red，
 textTheme：Theme.of（context）.textTheme.copyWith（标题：new TextStyle（color：Colors.grey））
 ），
子级：新的BottomNavigationBar（
项：< BottomNavigationBarItem> [
新的BottomNavigationBarItem（
图标：const Icon（Icons.add_shopping_cart，颜色：Colors.white，）， 
标题：new Text（ Services），
），
 new BottomNavigationBarItem（
图标：new Theme（
数据：n ew ThemeData（
 
），
子级：const Icon（Icons.calendar_today，color：Colors.white，）），
标题：new Text（ Appointment）
），
新的BottomNavigationBarItem（
图标：const Icon（Icons.face，颜色：Colors.white，），
标题：new Text（ Profile）
） 
]，
 currentIndex：index，
 onTap：（int i）{setState（（）{index = i;}）;}，
 fixedColor：Colors.yellowAccent，
类型：BottomNavigationBarType.fixed，
），
）
  

解决方案

您已经为每个图标明确设置了 color：Colors.white ，因此除非您另外设置，否则它们将一直为白色。 / p>

您有几个选择：

1）将BottomNavigationBar的类型设置为 type ：BottomNavigationBarType.fixed 并设置为 fixed颜色：Colors.orange 或任何您想要的颜色。请注意，您必须删除颜色：Colors.white ，否则它们仍将是白色。

2 ）您可以测试是否设置了正确的索引，然后决定将图标直接设置为哪种颜色，即 color = index == 0吗？ selectedColor：第一项是unselectedColor ，第二项是 index == 1 ，第二项是 item == 2 为第三个。

3）另一种替代方法是在整个BottomNavigationBar周围设置一个color = unselectedColor的IconTheme，然后仅使用 color = index == 0？ selectedColor：null 。

我建议阅读 BottomNavigationBar文档，特别是关于固定与移动的部分，因为它描述了您所遇到的确切问题的答案。

I am trying to change the selected color of a BottomNavigation icon but all I seem to be achieving is changing the text colours. Please assist:

Currently the text color changes to yellow when selected but the icon stays white, I want it to be yellow too and I have tried setting the icon color of the inactive icons to grey like the caption but it's not budging.

Here is my code:

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

解决方案

You've explicitly set color: Colors.white for each of the icons, so they will be white until you set them otherwise.

You have a couple of options:

1) Set your BottomNavigationBar's type to type: BottomNavigationBarType.fixed and set fixedColor: Colors.orange or whatever color you want. Note that you'll have to remove your color: Colors.white or they will still be white.

2) You could test for the right index being set and then decide which color to set the icon to directly, i.e. color = index == 0 ? selectedColor : unselectedColor for the first item, index==1 for the second, and item==2 for the third.

3) A slight alternative would be to set an IconTheme with color=unselectedColor around the entire BottomNavigationBar, then only set the selected item with color = index == 0 ? selectedColor : null.

I'd recommend reading the BottomNavigationBar documentation, particularly the part about fixed vs shifting, as it describes the answer to the exact problem you're having.

这篇关于Flutter BottomNavigationBar颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！