选择时如何更改 BottomNavigationBarItem 图标,Flutter
How to change BottomNavigationBarItem icon when selected, Flutter
我是 Flutter 新手。我有一个包含 4 个项目的 BottomNavigationBar
。我想在按下时更改项目的图标。请帮忙
这是我目前所做的。
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),))
]);
您可以通过检查当前索引是否等于 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),))
])
希望对您有所帮助!
如果您只想更改 BottomNavigationBarItem 图标的颜色,则不需要为一个图标设置两个不同颜色的图像。一个就够了。
您可以使用 ImageIcon 从自定义图像创建图标,并使用它的颜色 属性 来更改图标颜色,使用 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),)
)
],
),
希望有人会觉得这很有用。
Flutter 中的 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),))
]),
希望有人会觉得这有用。
如果有人正在寻找更改底部导航栏项目颜色的解决方案,当 "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]
),
),
),
如果您只想更改颜色而不是图标本身,fixedColor
确定图标被选中时的颜色:
BottomNavigationBar(
...
fixedColor: Colors.red,
...
)
我是这样解决的。在 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
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 - Selected tab
icon - Deselected tab
如果您显示来自图像资源的图标,则以这种方式更改底部导航栏的活动图标:
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')
),
color: _selectedIndex == ThisIndex?SelectedColor:normalColor,
只想添加到现有答案中:虽然 fixedColor
、(un)selectedItemColor
是可行的方法,但有一个陷阱:
它们将被 BottomNavigationBarItem.icon.color
覆盖!
因此,请务必先去除硬编码的图标颜色。
我是 Flutter 新手。我有一个包含 4 个项目的 BottomNavigationBar
。我想在按下时更改项目的图标。请帮忙
这是我目前所做的。
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),))
]);
您可以通过检查当前索引是否等于 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),))
])
希望对您有所帮助!
如果您只想更改 BottomNavigationBarItem 图标的颜色,则不需要为一个图标设置两个不同颜色的图像。一个就够了。
您可以使用 ImageIcon 从自定义图像创建图标,并使用它的颜色 属性 来更改图标颜色,使用 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),)
)
],
),
希望有人会觉得这很有用。
Flutter 中的 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),))
]),
希望有人会觉得这有用。
如果有人正在寻找更改底部导航栏项目颜色的解决方案,当 "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]
),
),
),
如果您只想更改颜色而不是图标本身,fixedColor
确定图标被选中时的颜色:
BottomNavigationBar(
...
fixedColor: Colors.red,
...
)
我是这样解决的。在 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
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 - Selected tab
icon - Deselected tab
如果您显示来自图像资源的图标,则以这种方式更改底部导航栏的活动图标:
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')
),
color: _selectedIndex == ThisIndex?SelectedColor:normalColor,
只想添加到现有答案中:虽然 fixedColor
、(un)selectedItemColor
是可行的方法,但有一个陷阱:
它们将被 BottomNavigationBarItem.icon.color
覆盖!
因此,请务必先去除硬编码的图标颜色。