dart - Flutter BottomNavigationBar 不能处理三个以上的项目

Question

我对 Flutter (0.6) 中的 BottomNavigationBar 有问题。一旦我将 三个以上的 BottomNavigationBarItems 添加为子项，栏中的按钮就会有 白色图标，而且它们会被弄乱。当我只使用三个或更少的项目时，一切都很好。

这是我使用的小部件代码，它打破了条形:

bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          iconSize: 20.0,
          items: [
          BottomNavigationBarItem(
              title: Text('Home'), icon: Icon(Icons.accessibility)),
          BottomNavigationBarItem(
              title: Text('Preise'), icon: Icon(Icons.account_box)),
          BottomNavigationBarItem(
              title: Text('Test'), icon: Icon(Icons.adb)),
          BottomNavigationBarItem(
              title: Text('Mehr'), icon: Icon(Icons.menu))
        ])

有人知道这里出了什么问题吗？

提前感谢您的任何提示，迈克尔

Answer 1

对于 4 个或更多项目，将 type 设置为固定。

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed, // This is all you need!
  items: // ...,
)

---

来自 https://github.com/flutter/flutter/issues/13642#issuecomment-371875044

When more than 3 BottomNavigationBar items are provided the type, ifunspecified, changes to BottomNavigationBarType.shifting perhttps://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html.This bit of information should be highlighted in the class's doc. It'seasy to overlook where it is (I overlooked it).

When the BottomNavigationBar's type isBottomNavigationBarType.shifting the items text and icons arerendered in white, via DefaultTextStyle and IconTheme. It's assumedthat theirBottomNavigationBarItem.backgroundColor will be specifiedas a contrasting color. This is obviously confusing.

The overall idea with shifting type bottom navigation bars is thateach item will have a different background color (that contrasts withwhite), since that color will become the color of the entirenavigation bar, when the item is selected.

The doc for BottomNavigationBar, and NavigationBarItem needs to beimproved.