固定类型时，根据 Flutter 中选择的项目更改整个底部导航栏的背景颜色答案

【问题标题】：Change the background color of the entire bottom navigation bar depending on item selected in Flutter when type is fixed固定类型时，根据 Flutter 中选择的项目更改整个底部导航栏的背景颜色
【发布时间】：2021-08-13 16:41:34
【问题描述】：

我正在创建这个应用程序，并添加了一个底部导航栏，除了背景颜色之外，一切正常。我希望根据选择的项目来改变背景。当我使用type: BottomNavigationBarType.shifting 时它工作得很好，但当我将它更改为type: BottomNavigationBarType.fixed 时就不行了。

问题是我不喜欢“shifting”的行为，我更喜欢“fixed”的行为。

我找到了这个例子online，但是它使用了shifting类型：

  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
  )

如何使用type: BottomNavigationBarType.fixed 使用底部导航栏实现相同的背景颜色变化效果？

提前致谢。

【问题讨论】：

根据所选择的项目用容器颜色包装怎么样？

标签： flutter dart flutter-bottomnavigation

【解决方案1】：

使用BackgroundNavigationBar.backgroundColor。考虑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,
          ),
        ],
      ),
    );
  }
}

【讨论】：