具有 3 个以上项目的 Flutter BottomNavigationBar 会根据所选项目自动应用填充

Question

在我的应用程序中有一个 BottomNavigationBar，目前有 4 个项目。其代码如下：

  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: "Startseite"),
      BottomNavigationBarItem(icon: Icon(Icons.star), label: "Favoriten"),
      BottomNavigationBarItem(icon: Icon(Icons.casino), label: "Quiz"),
      BottomNavigationBarItem(icon: Icon(Icons.map), label: "Karte"),
    ],
    currentIndex: _selectedIndex,
    unselectedItemColor: Colors.grey,
    showUnselectedLabels: true,
    selectedItemColor: Colors.blue,
    onTap: _onItemTapped,
  ),

_selectedIndex 只是一个整数。 _onItemTapped 函数：

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    setState(() {
      if (index == 0) {
        SwipePage();
      } else if (index == 1) {
        DatabaseProvider.db.queryDb();
        Navigator.of(context).push(
          toFavouritesPage(),
        );
      } else if (index == 2) {
        Navigator.of(context).push(
          toQuizPage(),
        );
      } else if (index == 3) {
        Navigator.of(context).push(
          toMapsPage(),
        );
      }
    });
  }

有 3 个项目看起来像这样（所有内容均匀分布）：

有 4 个项目看起来像这样（我不明白这个填充是从哪里来的）：

如何去掉填充以使所有内容保持均匀间隔？

Answer 1

将 bottomNavigationBarType: 设置为固定。默认情况下，在四个或更多项目上，它正在移动。这将突出显示所选项目，使其更加明显。

具有 3 个以上项目的 Flutter BottomNavigationBar 会根据所选项目自动应用填充

Flutter BottomNavigationBar with more than 3 items automatically applies padding depending on the selected item

dart

flutter

flutter-layout

flutter-widget