Flutter底部菜单超过3个就不显示了

这个菜单超过3个会不显示

bottomNavigationBar: BottomNavigationBar(
        // 底部导航栏
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        backgroundColor: Colors.blue, // 蓝色底部导航栏
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white70,
        items: const [
          //添加任务图标
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.assignment), label: '任务'),
          // BottomNavigationBarItem(icon: Icon(Icons.add), label: '新增'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '功能'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '个人中心'),
        ]

更多关于Flutter底部菜单超过3个就不显示了的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•2 个月前作者

更多关于Flutter底部菜单超过3个就不显示了的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在 Flutter 中，BottomNavigationBar 默认情况下最多显示 3 个菜单项。如果你需要显示超过 3 个菜单项，可以通过设置 type 属性为 BottomNavigationBarType.fixed 或 BottomNavigationBarType.shifting 来实现。

BottomNavigationBarType.fixed：适合显示多个菜单项，且每个菜单项的背景颜色相同。
BottomNavigationBarType.shifting：适合显示多个菜单项，且每个菜单项的背景颜色可以不同。

你可以通过以下方式修改代码来支持超过 3 个菜单项：

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed, // 设置为 fixed 类型
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  backgroundColor: Colors.blue, // 蓝色底部导航栏
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.white70,
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.assignment), label: '任务'),
    BottomNavigationBarItem(icon: Icon(Icons.add), label: '新增'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: '功能'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: '个人中心'),
  ],
),

解释：

type: BottomNavigationBarType.fixed：这个设置允许你显示超过 3 个菜单项，并且所有菜单项的背景颜色相同。
如果你希望每个菜单项的背景颜色不同，可以使用 BottomNavigationBarType.shifting，但需要注意每个菜单项的背景颜色需要单独设置。