书写技术成长之路

Flutter底部导航超过3个无法显示的问题解决

Flutter 默认的BottomNavigationBarItem最多显示3个元素,超过就会不显示或错乱,解决方案是加个type.

type:BottomNavigationBarType.fixed可以解决这个问题

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页')
        )
    ],
    ),

参考

https://stackoverflow.com/questions/50793810/how-to-display-more-than-3-items-in-a-bottomnavigationbar-while-coding-in-flutte

https://github.com/flutter/flutter/issues/13642