[英]Change the background color of the entire bottom navigation bar depending on item selected in Flutter when type is fixed
I'm creating this app, and I added a bottom navigation bar, and everything is working just fine, except the background color.我正在创建这个应用程序,并添加了一个底部导航栏,一切正常,除了背景颜色。 I would like the background to change depending which item has been selected.
我希望背景根据选择的项目而改变。 It works just fine when I use
type: BottomNavigationBarType.shifting
, but not when I change it to type: BottomNavigationBarType.fixed
.当我使用
type: BottomNavigationBarType.shifting
时效果很好,但当我将其更改为type: BottomNavigationBarType.fixed
时效果不佳。
The thing is that I don't like the " shifting " behavior, I prefer it " fixed ".问题是我不喜欢“移动”行为,我更喜欢“固定”。
I found this example online , but it uses the shifting type:我在网上找到了这个例子,但是它使用了移位类型:
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.teal
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
backgroundColor: Colors.cyan
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
backgroundColor: Colors.lightBlue,
),
],
type: BottomNavigationBarType.shifting,
currentIndex: _selectedIndex,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.grey,
iconSize: 40,
onTap: _onItemTap,
elevation: 5
)
How could I achieve the same background color changing effect using a bottom navigation bar using type: BottomNavigationBarType.fixed
?如何使用底部导航栏使用
type: BottomNavigationBarType.fixed
实现相同的背景颜色更改效果?
Thanks in advance.提前致谢。
Use BackgroundNavigationBar.backgroundColor
.使用
BackgroundNavigationBar.backgroundColor
。 Consider this modified example from the docs :考虑文档中的这个修改示例:
class Option {
final String name;
final IconData icon;
final Color color;
const Option({
required this.name,
required this.icon,
required this.color,
});
}
class HomePageState extends State<HomePage> {
static const List<Option> options = [
Option(name: "Home", icon: Icons.home, color: Colors.red,),
Option(name: "Business", icon: Icons.business, color: Colors.green),
Option(name: "School", icon: Icons.school, color: Colors.purple),
Option(name: "Settings", icon: Icons.settings, color: Colors.pink),
];
int index = 0;
Option get option => options [index];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: Text("Index $index: ${option.name}"),
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: option.color,
type: BottomNavigationBarType.fixed,
currentIndex: index,
onTap: (value) => setState(() => index = value),
items: [
for (final option in options) BottomNavigationBarItem(
icon: Icon(option.icon),
label: option.name,
),
],
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.