- Flutter的BottomNavigationBar不显示的问
- Flutter的BottomNavigationBar不显示的问
- Flutter - BottomNavigationBar
- Flutter 学习 :Flutter中的普通路由、路由传值
- Flutter中使用Provider底部导航进行状态管理
- Flutter 14 - BottomNavigationBar
- Flutter(十二):BottomNavigationBar
- Flutter BottomNavigationBar 组件
- Flutter(十八)BottomNavigationBar
- flutter bottomNavigationBar使用
下面的一段flutter代码中,会发现底部tabbar不显示
image.png
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
BottomNavigationBarItem(icon: Icon(Icons.book), label: '树'),
BottomNavigationBarItem(
icon: Icon(Icons.addchart_sharp),
label: '漫画',
),
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
],
),
原因
BottomNavigationBar有个type属性,默认值是fixed,意思是所有图标均匀显示在屏幕上
但是一旦BottomNavigationBarItem的数量 >=4时,这个type值自动切换成 shifting
所以需要手动给这个type赋值指定fixed
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
BottomNavigationBarItem(icon: Icon(Icons.book), label: '树'),
BottomNavigationBarItem(
icon: Icon(Icons.addchart_sharp),
label: '漫画',
),
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
],
),
这样就有了
image.png











网友评论