Question

我尝试添加5个BottomNavigationBarItem但是，如果我尝试添加超过3个项目，编译器会抛出错误。它看起来像这样：

 The following RangeError was thrown building BottomNavigationBar(dirty, state:
_BottomNavigationBarState#a56dd(tickers: tracking 3 tickers)):
 RangeError (index): Invalid value: Not in range 0..2, inclusive: 3

我需要在BottomNavigationBar中显示5个项目。帮助我解决这个问题。

BottomNavigationBar missing

有代码的链接，目前只有三个项目，我想添加两个项目而不会编译器抛出错误消息

Answer 1

只需编写此代码，以便将来查询有关此问题的信息。

只需在BottomNavigationBar构造函数中添加一个额外的参数-

type : BottomNavigationBarType.fixed

Check also the Flutter Official Ref.

可选：从开始重新启动您的应用，以解决渲染问题。

Answer 2

不要热重新加载，只需重新启动项目

Answer 3

这是因为默认的NavigatioBar不支持3个以上的项目，请使用： type: BottomNavigationBarType.fixed

或在下面复制并粘贴此代码

    bottomNavigationBar: BottomNavigationBar(
     type: BottomNavigationBarType.fixed,
     backgroundColor: Theme.Colors.primaryDarkColor,
    currentIndex: 1,
     items: [
    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up,), title: Text("GLO", 
    style: TextStyle(color: Colors.black),),),
    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title: 
    Text("MTN"),),
    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title: 
    Text("Airtel"),),
    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title: 
    Text("Airtel"),),
     ],
  ),

如何在flutter中编码时在BottomNavigationBar中显示3个以上的项目

3 个答案: