24

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

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

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),))
        ]);
4

10 回答 10

35

在 BottomNavigationBarItem 的颤振中添加了一个新功能，即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),))
    ]),

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

于 2018-08-28T19:26:37.483 回答
31

您可以通过检查当前索引是否等于索引的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),))
        ])

希望有帮助！

于 2018-02-28T13:29:58.990 回答
12

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

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]
          ),
        ),
    ),
于 2018-09-24T21:52:20.373 回答
9

如果您只想更改 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),)
      )
    ],
  ),

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

于 2018-07-24T19:22:06.733 回答
5

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

BottomNavigationBar(
        ...
        fixedColor: Colors.red,
        ...
)
于 2019-01-09T19:13:32.277 回答
4

2020

图片

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 - 选定的选项卡

图标 - 取消选择的选项卡

于 2020-05-02T04:13:57.927 回答
3

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

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')
),
于 2020-05-07T14:29:05.653 回答
0

我是这样解决的。在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'),
      ),
   ],
  ),
于 2020-03-23T12:57:56.690 回答
0 
color: _selectedIndex == ThisIndex?SelectedColor:normalColor,
于 2020-05-29T04:56:47.260 回答
0

只是想添加到现有的答案：虽然fixedColor,(un)selectedItemColor是要走的路，但有一个问题：

他们将被BottomNavigationBarItem.icon.color!

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

于 2020-09-06T04:29:17.853 回答