Flutter BottomNavigationBarItem超过三个显示为白色（不显示）

底部导航栏类型与显示效果
最新推荐文章于 2025-09-24 13:15:52 发布
原创 最新推荐文章于 2025-09-24 13:15:52 发布 · 1.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #flutter

这篇博客讨论了底部导航栏在不同类型的显示方式，包括BottomNavigationBarType.fixed和BottomNavigationBarType.shifting。当项目少于4个时，底部导航栏默认设置为fixed，选中项以fixedColor呈现；若项目数量大于等于4，则使用shifting，所有项目显示为白色，背景与导航栏相同。文章还提到了导航栏颜色和选中项背景色的配置，以及如何通过设置type属性来改变导航栏的行为。

 

官方解释为：

底部导航栏的类型会改变其项的显示方式。如果未指定，则自动设置为

BottomNavigationBarType。当少于4个项目时修正，

BottomNavigationBarType。否则转移。

BottomNavigationBarType。修正了少于四个项目时的默认设置。选中的项目是用fixedColor呈现的

非空，否则为主题的主题数据。primaryColor使用。的导航栏的背景色是默认的材质背景色颜色,ThemeData。帆布色(基本上是不透明的白色)。

BottomNavigationBarType。移动，当有四个或更多项时的默认值。所有的项目都是白色的，导航栏是白色的

底色是一样的BottomNavigationBarItem。选定项目的背景色。在这个假设每个项目都有不同的背景颜色和背景色将与白色形成很好的对比。

 

 

处理方式：

bottomNavigationBar 添加：
type: BottomNavigationBarType.fixed,

 

《Flutter 控件大全》第十九个：BottomNavigationBar 和 BottomNavigationBarItem
老孟Flutter
04-04 423
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 BottomNavigationBar BottomNavigationBar 和 Bott...
Flutter 设置 App 的主色调与字体
Flutter 跨平台技术研究
11-17 1381
App 开发过程中，肯定希望给用户带来一致的体验，这其中最基础的就是色调、字体保持一致。在 Flutter 中，可以设置全局的主题色调和字体，从而在其他页面引用主色调和字体，实现页面展示层面的一致。 Flutter 的主题色和字体可以在MaterialApp 中设置，即在 main.dart 的入口返回的 MaterialApp 组件统一设置全局的主色调和字体。如下面的代码所示： class MyApp extends StatelessWidget { @override Widget bui.
Flutter开发笔记——BottomNavigationBar设置未选择Item颜色
Congying-Wang的博客
08-05 5023
可以用如下属性来设置 bottomNavigationBar: BottomNavigationBar( ... unselectedItemColor: Colors.grey, ... )
Flutter：bottomNavigationBar图标白色的解决办法
smile_to_the_world的专栏
08-08 1288
Flutter中，如果底部的Item超过三个，我们就需要为BottomNavigationBar设置一个type属性为：BottomNavigationBarType.fixed，否则图标就会变成白色，导致什么都看不见。 ...
Flutter底部导航：BottomNavigationBar实战
最新发布
gitblog_00359的博客
09-24 445
底部导航栏（Bottom Navigation Bar）是移动应用中常用的UI组件，用于在多个主要功能模块间快速切换。Flutter提供了`BottomNavigationBar`组件，支持固定（fixed）和浮动（shifting）两种风格，可高度定制图标、颜色和交互效果。本文将从基础用法到高级定制，全面讲解`BottomNavigationBar`的实战技巧。 ## 一、基础实现：从0到1...
BottomNavigationView3个以上图标不显示文字
一个IT人的技术成长历程。
09-23 705
因为官方的BottomNavigationView默认有个放大的ShiftingMode效果，但是尚未支持代码层级的切换。在3个menu item及以下时默认关闭，而到了4个及以上时默认开启，就会出现以上问题。由isShifting方法可见，当labelVisibilityMode==0时或按钮数大于3则位移，那么只要将labelVisibilityMode值设置为不是0和-1就可以了。如果BottomNavigationItemView类并没有setShiftingMode方法。
Flutter 3.0.5 使用BottomNavigationBar数量超过3个时底部导航显示为白色
菜鸟先飞
08-20 801
当数量小于等于3时会默认fixed模式下使用主题色，大于3时则会默认shifting模式下使用白色，所以，type: BottomNavigationBarType.fixed,即可
【Android】BottomNavigationView底部导航栏自定义选中颜色
热门推荐
midnight_time的博客
06-19 1万+
实现效果 步骤如下（共4步） 1. AndroidStudio可以创建出一个BottomNavigationView的Demo File->new->new project->Bottom Navigation Activity 2. 创建完成后，在layout文件中，对应控件的属性添加一条自定义的属性，这样这个控件就会去找对应的资源。 app:it...
flutter 三：界面结构
煮酒Shae
03-24 1362
文章目录1.Material 应用 1.Material 应用 如果不想flutter debug的时候模拟器右上角显示DEBUG，就添加： debugShowCheckedModeBanner: false, 另外建dart文件，给main.dart减负。 因为post.dart在相对于listview_demo.dart的上一级目录往下找，所以加一个…/ import '../model/...
Flutter基础
qq_44242204的博客
11-30 2324
Drawer使用 mainPage.dart // ignore_for_file: unused_import, prefer_const_constructors, prefer_const_literals_to_create_immutables import 'package:flutter/material.dart'; import 'widget/drawerPage.dart'; main() => runApp(myApp()); class myApp extends St
Flutter搭建底部导航
一杯清泉
05-15 589
一、基础知识介绍 1、修改状态栏颜色 SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.transparent, statusBarIconBrightness: Brightness.light); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); statusBarCo...
Flutter之导航栏骨架实现
学习和工作总结，共勉！
05-04 1706
一、简介 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter 用Dart作为开发框架和widget的语言。 二、优势 React-Native、Weex核心是通过Javascript开发，执行时需要Javascript解释器，UI是通过原生控件渲染。Flutter使用C、C ++、Dart和Skia（2D渲染引擎）构建。在IOS上，Flu...
从0开始写一个基于Flutter的开源中国客户端（5）——App整体布局框架搭建
2401_84121798的博客
04-19 1036
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。上面分享的腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。【Android思维脑图（技能树）】知识不体系？
Flutter实现底部导航栏样式
dongxingxxx的博客
11-27 1980
一、Flutter实现底部导航栏 在手机端App主界面中，我们经常看到下面有多个按钮Tab，点击下面的Tab，切换上面的页面。类似与如下效果 在实现Flutter实现底部导航栏的时候，我们先学习连个widget. 1、BottomNavigationBar BottomNavigationBar({...
Flutter:使用BottomNavigationBar数量超过3个时显示白屏
北暖之森
06-30 3447
Flutter:使用BottomNavigationBar数量超过3个时显示白屏 这里我们使用了4个BottomNavigationBar,运行时发现界面底部白屏了 通过源码我们可以发现，当数量小于等于3时会默认fixed模式下使用主题色，大于3时则会默认shifting模式下使用白色。 如果只需要显示出来的话我们可以使用selectedItemColor属性与unselectedItemColor属性设置颜色，并将BottomNavigationBarType修改为fiexd模式。 再次运行后成功显
Flutter BottomNavigationBar不显示（显示白色）？
yechaoa
05-05 2518
BottomNavigationBar 超过3个之后不显示（显示白色）？ 官网文档解释： The bottom navigation bar’s type changes how its items are displayed. If not specified it’s automatically set to BottomNavigationBarType.fixed when ther...
【Flutter】底部导航BottomNavigationBar的使用
weixin_52418790的博客
02-20 2438
底部导航栏三种效果： 当选中时图标文字变色，未选中时不显示文字。 显示图标和文字，选中变色。 显示图标和文字，设置背景。配合使用，背景才生效。
Flutter 入门与实战（四）：设置 App 的主色调与字体
2401_84123188的博客
04-05 1336
通过 MateriaApp 的 theme 属性，构建 ThemeData 来配置全局主题。​在应用中可以通过 Theme.of(context)获取当前主体，再获取对应的属性来继承主题的色调或字体。如下面的代码的 Text 的样式就继承了主体的bodyText1的字体特性。@override‘岛’,),),而在BottomNavigationBar中的 selectedItemColor（选择颜色）则继承了主色调。@override。
Flutter BottomNavigationBar组件使用详解，如何实现自定义底部导航栏
keganyuan的博客
06-19 3115
自定义的样式包括颜色、形状和大小。你可以通过设置elevation和shape属性来实现。// 导航项数组// 当前选中项的索引// 点击导航项时触发的回调函数// 自定义选中项的颜色// 自定义未选中项的颜色// 导航栏的背景颜色// 导航栏的阴影大小// 导航栏的形状，这里设置为圆角),// 自定义选中项的图标主题size: 30.0, // 选中图标大小),// 自定义未选中项的图标主题size: 25.0, // 未选中图标大小),
flutter BottomNavigationBarItem
03-27
### 使用 Flutter 中的 BottomNavigationBarItem `BottomNavigationBarItem` 是 `BottomNavigationBar` 的子组件之一，用于定义底部导航栏中的每一个项目。以下是关于如何创建和配置 `BottomNavigationBarItem` 的详细说明。 #### 创建 BottomNavigationBarItem 通过设置图标 (`icon`) 和标签 (`label`) 来初始化一个 `BottomNavigationBarItem` 实例[^1]。还可以提供未选中状态下的颜色 (`inactiveColor`) 和选中状态的颜色 (`activeColor`) 属性来增强视觉效果[^3]。 ```dart BottomNavigationBarItem( icon: Icon(Icons.home), label: &#39;Home&#39;, backgroundColor: Colors.blue, // 可选背景颜色 ) ``` 上述代码片段展示了如何构建一个简单的 `BottomNavigationBarItem`，其中指定了图标的样式以及对应的标签文字[^2]。 #### 结合 BottomNavigationBar 使用 为了使 `BottomNavigationBarItem` 生效，需将其作为列表项传递给父级组件 `BottomNavigationBar` 的 `items` 参数。下面是一个完整的例子： ```dart import &#39;package:flutter/material.dart&#39;; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: BottomNavigationExample(), ); } } class BottomNavigationExample extends StatefulWidget { @override _BottomNavigationExampleState createState() => _BottomNavigationExampleState(); } class _BottomNavigationExampleState extends State<BottomNavigationExample> { int currentIndex = 0; final List<Widget> screens = [ Center(child: Text(&#39;Screen 1&#39;)), Center(child: Text(&#39;Screen 2&#39;)), Center(child: Text(&#39;Screen 3&#39;)) ]; void onTabTapped(int index) { setState(() { currentIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(&#39;Bottom Navigation Bar Example&#39;)), body: screens[currentIndex], bottomNavigationBar: BottomNavigationBar( onTap: onTabTapped, currentIndex: currentIndex, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: &#39;Home&#39; ), BottomNavigationBarItem( icon: Icon(Icons.search), label: &#39;Search&#39; ), BottomNavigationBarItem( icon: Icon(Icons.person), label: &#39;Profile&#39; ) ], ), ); } } ``` 此示例程序演示了一个具有三个选项卡的应用界面，并且当点击不同的按钮时会更新显示的内容页面。 #### 注意事项 - 图标和文本应保持简洁明了以便于用户快速识别当前所处位置。 - 如果需要更复杂的交互逻辑可以考虑引入第三方库或者自定义绘制方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值