blocks|key|4329115|text|您可以通过检查当前索引是否等于BottomNavigationBarItem索引来更改图标。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4329116|静态索引值的简单示例：|4329117|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),))
++++++++])|code-block|syntax|javascript|4329118|希望这能有所帮助！|4329119|entityMap^0|F|N|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

You can change the icon by checking for the current index is equal to the index of <code>BottomNavigationBarItem</code> index.

Simple example with static index values:

<pre><code>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),))
 ])
</code></pre>

Hope that helps!

blocks|key|4329142|text|在BottomNavigationBarItem的flutter中添加了新的功能，即active+icon。我们可以用它来判断选项卡处于活动状态时应该显示什么图标|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4329143|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),))
++++]),|code-block|syntax|javascript|4329144|希望有人会发现这是有用的。|4329145|entityMap^0|16|B|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

There is new feature added in flutter in BottomNavigationBarItem that is <code>active icon</code>. we can use it to tell what should be the icon when a tab is active

<pre><code>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),))
 ]),
</code></pre>

Hope someone will find this useful.

blocks|key|4329191|text|如果有人正在寻找更改底部导航栏项目的颜色的解决方案，当"type“设置为”set“时，请尝试以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4329192|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]
++++++++++),
++++++++),
++++),|code-block|syntax|javascript|4329193|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If anyone is looking for a solution to change the Bottom Navigation Bar Item's color,when "type" is set to "shifting", then give this a try:

<pre><code>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]
 ),
 ),
 ),
</code></pre>

blocks|key|4329221|text|如果您只想更改颜色，而不想更改图标本身，fixedColor会在图标被选中时确定它的颜色：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4329222|BottomNavigationBar(
++++++++...
++++++++fixedColor:+Colors.red,
++++++++...
)|code-block|syntax|javascript|4329223|entityMap^0|K|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you just want to change the color and not the icon itself, <code>fixedColor</code> determines the colour of the icon when it's selected:

<pre><code>BottomNavigationBar(
 ...
 fixedColor: Colors.red,
 ...
)
</code></pre>

blocks|key|4329244|text|如果您正在显示图像资源中的图标，则以这种方式更改底部导航栏的活动图标：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4329245|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')
),|code-block|syntax|javascript|4329246|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Changed Active Icon for Bottom Navigation Bar in this way if you are showing icon from Image Assets:

<pre><code>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')
),
</code></pre>

blocks|key|4329261|text|color:+_selectedIndex+==+ThisIndex?SelectedColor:normalColor,|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4329262|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>color: _selectedIndex == ThisIndex?SelectedColor:normalColor,
</code></pre>

blocks|key|4329305|text|我只想补充现有的答案:虽然fixedColor，(un)selectedItemColor是要走的路，但有一个陷阱：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4329306|它们将被BottomNavigationBarItem.icon.color覆盖！|4329307|因此，首先要确保你去掉了硬编码的图标颜色。|4329308|entityMap^0|D|A|O|L|0|4|Y|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

Just wanna add to the existing answers: Although <code>fixedColor</code>, <code>(un)selectedItemColor</code> are the ways to go, there is a gotcha:
They will be overriden by <code>BottomNavigationBarItem.icon.color</code>!
So make sure you get rid of the hardcoded icon color first.

I am new to Flutter. I have a <code>BottomNavigationBar</code> with 4 items. I want to change icon of the item when pressed. Please help.

This is what I have done so far.

<pre><code>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),))
 ]);
</code></pre>

How to change BottomNavigationBarItem icon when selected, Flutter

Flutter

我是第一次接触Flutter。我有一个有4个项目的BottomNavigationBar。我想在按下时更改项目的图标。请帮帮忙。这就是我到目前为止所做的。bottomNavigationBar : new BottomNavigationBar(        currentIndex: index,        o...

问如何更改BottomNavigationBarItem图标选中时，颤动
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改BottomNavigationBarItem图标选中时，颤动EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改BottomNavigationBarItem图标选中时，颤动
EN