Flutter BottomNavigationBar不显示(显示白色)?

简介: Flutter BottomNavigationBar不显示(显示白色)?

BottomNavigationBar 超过3个之后不显示(显示白色)?


image.png


官网文档解释:


The bottom navigation bar’s type changes how its items are displayed. If not specified it’s automatically set to

BottomNavigationBarType.fixed when there are less than four items,

BottomNavigationBarType.shifting otherwise.


BottomNavigationBarType.fixed, the default when there are less than four items. The selected item is rendered with fixedColor if it’s

non-null, otherwise the theme’s ThemeData.primaryColor is used. The

navigation bar’s background color is the default Material background

color, ThemeData.canvasColor (essentially opaque white).

BottomNavigationBarType.shifting, the default when there are four or more items. All items are rendered in white and the navigation bar’s

background color is the same as the

BottomNavigationBarItem.backgroundColor of the selected item. In this

case it’s assumed that each item will have a different background

color and that background color will contrast well with white.

解决办法:

加一个type属性:


type: BottomNavigationBarType.fixed,


image.png

目录
相关文章
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
357 0
|
移动开发 Android开发 索引
flutter之从零开始搭建(一)之 BottomNavigationBar
flutter之从零开始搭建(一)之 BottomNavigationBar
185 0
flutter之从零开始搭建(一)之 BottomNavigationBar
|
索引
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)
361 0
|
Dart 开发者
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
163 0
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
|
Dart 开发者
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(二)
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(二)
364 0
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(二)
|
索引
Flutter基础widgets教程-BottomNavigationBar篇
Flutter基础widgets教程-BottomNavigationBar篇
234 0
|
索引
flutter之BottomNavigationBar
flutter之BottomNavigationBar
138 0
|
数据可视化 API 索引
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(一)
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )(一)
802 0
Flutter:让BottomNavigationBar保持状态
版本所有,转载请注明出处。 @有问题。 如果有关注过我的同学可能看过我之前的一篇名为Flutter学习笔记:BottomNavigationBar实现多个Navigation的文章,这篇文章主要是介绍了通过Navigation实现保持住让BottomNavigationBar页面的状态,从而避免在BottomNavigationBar切换时导致页面重新initState。
2061 0
|
2月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin