Как изменить значок BottomNavigationBarItem при выборе, 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),))
]);
11 ответов
Вы можете изменить значок, проверив, что текущий индекс равен индексу 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 добавлена новая функция, которая 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" установлено значение "shift", то попробуйте:
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, чтобы создать значок из пользовательского изображения, и использовать его свойство 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),)
)
],
),
Надеюсь, кто-то найдет это полезным.
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 - Выбранная вкладка
icon - вкладка не выделена
Если вы просто хотите изменить цвет, а не сам значок, fixedColor определяет цвет значка при его выборе:
BottomNavigationBar(
...
fixedColor: Colors.red,
...
)
Изменен активный значок для нижней панели навигации таким образом, если вы показываете значок из Image Assets:
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')
),
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
Просто хочу добавить к существующим ответам: Хотя fixedColor, (un)selectedItemColor пути, есть подводный камень:
Они будут подавлены BottomNavigationBarItem.icon.color!
Поэтому сначала убедитесь, что вы избавились от жестко запрограммированного цвета значка.
color: _selectedIndex == ThisIndex?SelectedColor:normalColor,
Я решил таким образом. В 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'),
),
],
),