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

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

如果提供了3个以上的BottomNavigationBar项，则类型为   未指定，则将BottomNavigationBarType.shifting更改为   https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html。   这些信息应在课程文档中突出显示。它的   容易忽略它的位置（我忽略了它）。

当BottomNavigationBar的类型为   BottomNavigationBarType.shifting的项目文本和图标是   通过DefaultTextStyle和IconTheme以白色呈现。假设   将指定他们的BottomNavigationBarItem.backgroundColor   作为对比色。这显然令人困惑。

使用shifting型底部导航栏的总体想法是   每个项目都有不同的背景色（与   白色），因为该颜色将成为整个颜色   导航栏，当选中该项时。

BottomNavigationBar和NavigationBarItem的文档必须为   改善了。

Answer 2

在BottomNavigationBar上添加类型：BottomNavigationBarType.fixed

bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('A')),
      BottomNavigationBarItem(icon: Icon(Icons.access_alarm), title: Text('B')),
      BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('C')),
      BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('D')),
    ],

Flutter BottomNavigationBar不能使用三个以上的项目

2 个答案: