包含 5 个项目的底部导航栏答案

【问题标题】：BottomNavigationBar with 5 items包含 5 个项目的底部导航栏
【发布时间】：2018-05-01 03:07:17
【问题描述】：

当我尝试创建一个包含 5 个项目的 BottomNavigationBar 时，它会出错：

RangeError（索引）：无效值：不在 0..2 范围内，包括：3

代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new BottomNavDemo());
}

class BottomNavDemo extends StatefulWidget {
  @override
  _BottomNavDemoState createState() => new _BottomNavDemoState();
}

class _BottomNavDemoState extends State<BottomNavDemo> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'my title',
      home: new Scaffold(
        bottomNavigationBar: new BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
                title: new Text('One'), 
                icon: new Icon(Icons.home)),
            new BottomNavigationBarItem(
                title: new Text('Two'),
                icon: new Icon(Icons.terrain)),
            new BottomNavigationBarItem(
                title: new Text('Three'),
                icon: new Icon(Icons.bluetooth)),
            new BottomNavigationBarItem(
                title: new Text('Four'),
                icon: new Icon(Icons.cake)),
            new BottomNavigationBarItem(
                title: new Text('Five'),
                icon: new Icon(Icons.edit)),
          ],
        ),
      ),
    );
  }
}

它应该能够支持列表中的 5 个项目。对吗？

【问题讨论】：

我只是复制粘贴您的代码，它运行良好。只需尝试清理您的构建或从模拟器或模拟器中删除应用程序并重新启动它。
@dhuma1981，我在一台新安装了颤振的新机器上尝试了这个，如果我有 4 或 5 个项目，我会得到一个空白的白屏。如果我将其中两个注释掉，所以我只有 3 个项目，它会正常显示。

标签： flutter

【解决方案1】：

清理并重新启动实际上解决了问题。它还引入了一个新问题。

没有明确设置

type: BottomNavigationBarType.fixed,

图标在非常浅的灰色背景上显示为白色，直到我单击它们所在的区域之前我什至看不到。设置好这个属性后，就可以正常使用了。

感谢@dhuma1981 的帮助。

【讨论】：

我很乐意帮助你:)
您可以接受自己的答案，不再显示为未回答。