选择时如何更改BottomNavigationBarItem图标，颤振答案

【问题标题】：How to change BottomNavigationBarItem icon when selected, Flutter选择时如何更改BottomNavigationBarItem图标，颤振
【发布时间】：2018-02-28 12:47:59
【问题描述】：

我是 Flutter 的新手。我有一个 BottomNavigationBar 有 4 个项目。我想在按下时更改项目的图标。请帮忙。

这是我到目前为止所做的。

bottomNavigationBar : new BottomNavigationBar(
        currentIndex: index,
        onTap: (int index) {
          setState(() {
            this.index = index;
          }
          );
          _navigateToScreens(index);
        },
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
              backgroundColor: Colors.white,
              icon: new Image.asset('images/1.0x/icon1.png'),
              title: new Text("Route1", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0))),
          new BottomNavigationBarItem(
              icon: new Image.asset('images/1.0x/icon2.png'),
              title: new Text("Route2", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0))),
          new BottomNavigationBarItem(
              icon: new Image.asset('images/1.0x/icon3.png'),
              title: new Text("Route3", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0),)),
          new BottomNavigationBarItem(
              icon: new Image.asset('images/1.0x/icon4.png'),
              title: new Text("Route4", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0),))
        ]);

【问题讨论】：

感谢您的回复。我已将其发布为答案。请检查。
您可以编辑问题，而不是作为答案发布。
是的。我的错。我会这样做。谢谢

标签： dart flutter bottombar

【解决方案1】：

BottomNavigationBarItem 中 Flutter 中添加了新功能 active icon。我们可以用它来判断标签处于活动状态时应该是什么图标

bottomNavigationBar : new BottomNavigationBar(
    currentIndex: index,
    onTap: (int index) {
      setState(() {
        this.index = index;
      }
      );
      _navigateToScreens(index);
    },
    type: BottomNavigationBarType.fixed,
    items: [
      new BottomNavigationBarItem(
          backgroundColor: Colors.white,
          icon: new Image.asset('images/1.0x/icon1.png'),
          activeIcon:new Image.asset('images/1.0x/newIcon.png'),
          title: new Text("Route1", style: new TextStyle(
              color: const Color(0xFF06244e), fontSize: 14.0))),
      new BottomNavigationBarItem(
          icon: new Image.asset('images/1.0x/icon2.png'),
          activeIcon:new Image.asset('images/1.0x/newIcon.png'),
          title: new Text("Route2", style: new TextStyle(
              color: const Color(0xFF06244e), fontSize: 14.0))),
      new BottomNavigationBarItem(
          icon: new Image.asset('images/1.0x/icon3.png'),
          activeIcon: new Image.asset('images/1.0x/newIcon.png'),
          title: new Text("Route3", style: new TextStyle(
              color: const Color(0xFF06244e), fontSize: 14.0),)),
      new BottomNavigationBarItem(
          icon: new Image.asset('images/1.0x/icon4.png'),
          activeIcon: new Image.asset('images/1.0x/newIcon.png'),
          title: new Text("Route4", style: new TextStyle(
              color: const Color(0xFF06244e), fontSize: 14.0),))
    ]),

希望有人会觉得这很有用。

【讨论】：

标题已弃用，请改用标签

【解决方案2】：

您可以通过检查当前索引是否等于BottomNavigationBarItem索引的索引来更改图标。

带有静态索引值的简单示例：

bottomNavigationBar : new BottomNavigationBar(
        currentIndex: index,
        onTap: (int index) {
          setState(() {
            this.index = index;
          }
          );
          _navigateToScreens(index);
        },
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
              backgroundColor: Colors.white,
              icon: index==0?new Image.asset('images/1.0x/icon1.png'):new Image.asset('images/1.0x/newIcon.png'),
              title: new Text("Route1", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0))),
          new BottomNavigationBarItem(
              icon: index==1?new Image.asset('images/1.0x/icon2.png'):new Image.asset('images/1.0x/newIcon.png'),
              title: new Text("Route2", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0))),
          new BottomNavigationBarItem(
              icon: index==2?new Image.asset('images/1.0x/icon3.png'):new Image.asset('images/1.0x/newIcon.png'),
              title: new Text("Route3", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0),)),
          new BottomNavigationBarItem(
              icon: index==3?new Image.asset('images/1.0x/icon4.png'):new Image.asset('images/1.0x/newIcon.png'),
              title: new Text("Route4", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0),))
        ])

希望有帮助！

【讨论】：

坏主意。写得太累了。相反，您可以将列表包含在 Theme 中。并覆盖一些属性。如primaryColor、accentColor、caption.color。这些值是 BottomNavigationBar 用于图标的值，具体取决于它们是否被选中。
我同意你的观点。但是这会如何改变图标，这是一个Image.asset？
哦，我的错。我认为这是关于更改选定的图标颜色。那就忽略我的消息吧。
@Darky，是的，我需要更改图标，否则您的答案将是正确的。谢谢
在移动到其他屏幕后按返回按钮时，我还需要在第一个 BottomNavigationBarItem 中设置第一张图像，在其余项目中设置第二张图像（在条件表达式中）。这怎么可能？请帮忙。

【解决方案3】：

如果有人正在寻找改变底部导航栏项目颜色的解决方案，当“type”设置为“shifting”时，试试这个：

type: BottomNavigationBarType.shifting,
  items: [
    BottomNavigationBarItem(
      activeIcon: Icon(
          Icons.home,
          color: Colors.grey[700],
        ),
      icon: Icon(
          Icons.home,
          color: Colors.grey,
        ),
      title: Text(
        'Home',
        style: TextStyle(
          color: Colors.grey[600]
          ),
        ),
    ),

【讨论】：

【解决方案4】：

如果您只想更改BottomNavigationBarItem 图标的颜色，则不需要为一个图标设置两个不同颜色的图像。一个就够了。

您可以使用 ImageIcon 从自定义图像创建图标，并使用它的 color 属性来更改图标颜色，使用 currentIndex 的值，如下所示：

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    currentIndex: currentTab,
    onTap: (int index) {
      setState(() {
        currentTab = index;
        currentPage = pages[index];
      });
    },
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage("assets/img/tab1.png"),
            color: currentTab == 0
                ? Colors.orange
                : Colors.black,
          ),
          title: Text('Title 1',
            style: TextStyle(
                fontSize: 10.0,
                color: currentTab == 0
                    ? Colors.orange
                    : Colors.black),
          )
      ),
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage("assets/img/tab2.png"),
            color: currentTab == 1
                ? Colors.orange
                : Colors.black,
          ),
          title: Text('Title 2',
            style: TextStyle(
                fontSize: 10.0,
                color: currentTab == 1
                    ? Colors.orange
                    : Colors.black),)
      ),
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage("assets/img/tab3.png"),
            color: currentTab == 2
                ? Colors.orange
                : Colors.black,
          ),
          title: Text('Title 3',
            style: TextStyle(
                fontSize: 10.0,
                color: currentTab == 2
                    ? Colors.orange
                    : Colors.black),)
      ),
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage("assets/img/tab4.png"),
            color: currentTab == 3
                ? Colors.orange
                : Colors.black,
          ),
          title: Text('Title 4',
            style: TextStyle(
                fontSize: 10.0,
                color: currentTab == 3
                    ? Colors.orange
                    : Colors.black),)
      )
    ],
  ),

希望有人会发现这很有用。

【讨论】：

如果您想更改所选图标的颜色，您只需在 BottomNavigationBar 本身设置“fixedColor”即可。例如BottomNavigationBar（fixedColor：colorPrimary，项目：[BottomNavigationBarItem（icon：Icon（Icons.home），title：Text（“first”）），BottomNavigationBarItem（icon：Icon（Icons.pie_chart），title：Text（“insights”）） ], ), )
这应该是与@miloss 解决方案一起选择的答案。非常简洁，无需每次点击标签时切换图像

【解决方案5】：

如果您只想更改颜色而不是图标本身，fixedColor 确定图标被选中时的颜色：

BottomNavigationBar(
        ...
        fixedColor: Colors.red,
        ...
)

【讨论】：

【解决方案6】：

2020

Image

2路

目前更好的方法是：

    selectedItemColor: Colors.white,
    unselectedItemColor: Color(0xFFF434A50),
    items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
            icon: ImageIcon(AssetImage("assets/tab1.png"),),
            title: Text('Agents'),
        ),
    ]

另一种方式：

BottomNavigationBarItem(
   activeIcon: Image.asset("assets/tab1.png",width: 15,color: Colors.white,),
   icon: Image.asset("assets/tab1.png",width: 15,color: Color(0xFFF434A50),),
   title: Text('Agents'),
 ),

activeIcon - 选中的标签

图标 - 取消选择的标签

【讨论】：

【解决方案7】：

如果您从图像资源中显示图标，则以这种方式更改底部导航栏的活动图标：

BottomNavigationBarItem(
              activeIcon: Image.asset(
                'assets/images/useractive.png',
                height: 25,
                width: 25,
              ),
              icon: Image.asset(
                'assets/images/user.png',
                height: 25,
                width: 25,
              ),
              title: Text('My Time Out')
),

【讨论】：

【解决方案8】：

我就是这样解决的。在BottomNavigationBar，有两个属性selectedItemColor和unselectedItemColor

bottomNavigationBar: BottomNavigationBar(
    ...
    selectedItemColor: Theme.of(context).primaryColor,
    unselectedItemColor: Theme.of(context).secondaryHeaderColor,
    ...
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        title: Text('Search'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.star),
        title: Text('Featured'),
      ),
   ],
  ),

【讨论】：

这似乎只影响文本标签颜色。图标颜色不受影响。不幸的是，我也尝试过(un)selectedIconTheme，但无济于事。

【解决方案9】：

color: _selectedIndex == ThisIndex?SelectedColor:normalColor,

【讨论】：

【解决方案10】：

只想添加到现有答案：虽然fixedColor、(un)selectedItemColor 是可行的方法，但有一个问题：

它们将被BottomNavigationBarItem.icon.color覆盖！

因此，请确保首先摆脱硬编码的图标颜色。

【讨论】：