[英]BottomNavigationBarItem label not showing when selected in flutter
[英]How to change BottomNavigationBarItem icon when selected, 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 的 flutter 中添加了一個新功能,即active icon
。 we can use it to tell what should be the icon when a tab is active
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),))
]),
希望有人會發現這很有用。
您可以通過檢查當前索引是否等於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),))
])
希望有幫助!
如果有人正在尋找更改底部導航欄項目顏色的解決方案,當“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]
),
),
),
如果您只想更改 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),)
)
],
),
希望有人會發現這很有用。
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 - 選定的選項卡
圖標 - 取消選擇的選項卡
如果您只想更改顏色而不是圖標本身, fixedColor
確定圖標被選中時的顏色:
BottomNavigationBar(
...
fixedColor: Colors.red,
...
)
如果您顯示來自圖像資產的圖標,則以這種方式更改底部導航欄的活動圖標:
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')
),
我是這樣解決的。 在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'),
),
],
),
color: _selectedIndex == ThisIndex?SelectedColor:normalColor,
只是想添加到現有的答案:雖然fixedColor
, (un)selectedItemColor
是可行的方法,但有一個陷阱:
它們將被BottomNavigationBarItem.icon.color
覆蓋!
因此,請確保首先擺脫硬編碼的圖標顏色。
BottomNavigationBarItem(
activeIcon: Image.asset(
'lib/assets/images/homeActive.png',
height: 25,
width: 25,
),
icon: Image.asset(
'lib/assets/images/homePassive.png',
height: 25,
width: 25,
),
label: 'Home'
)
更新 2022
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.