时间戳

首页 > 解决方案 > Flutter BottomNavigationBar 不能处理三个以上的项目

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

问题描述

我对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))
        ])

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

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

标签： dartflutter

解决方案

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

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

来自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 的文档需要改进。

推荐阅读