flutter 底部导航栏没有文字

最新推荐文章于 2023-10-19 17:51:57 发布

yingkongshi07

最新推荐文章于 2023-10-19 17:51:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：小白学flutter踩坑系列文章标签： flutter

本文链接：https://blog.csdn.net/yingkongshi07/article/details/120834373

小白学flutter踩坑系列专栏收录该内容

13 篇文章

订阅专栏

这篇博客探讨了当底部导航栏超过三个图标时，如何通过设置`BottomNavigationBarType.fixed`来防止标签文字消失的问题。示例代码展示了如何在Flutter中固定底部导航栏并确保文字显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题:超过三个icon就会导致label的文字消失

解决方案:固定底部导航栏

关键代码: type: BottomNavigationBarType.fixed,

bottomNavigationBar:  BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    selectedItemColor: Colors.red,
    unselectedItemColor: Colors.black45,
    currentIndex: 4,
    items: []
)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yingkongshi07

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Flutter初学者之普通底部导航栏及自定义不规则底部导航栏的实现

2401_84123357的博客

04-05

982

老规矩，先上效果图一般我们做APP的都知道，很多APP 底部导航栏采用这样的样式，如果用原生开发还是比较费劲的，但是用Flutter 开发还是很便捷的，原理大概就是将 Flutter 中的 FloatActionButton 悬浮按钮融合到底部导航栏中去实现，上代码！这里我们还是采用刚开始那段入口代码，只是我们的 bottomNavigationBar 属性实现的组件我们去单独定义，将这个自定义底部导航栏的功能单独写一个组件。///自定义组件 StatelessWidget(无状态组件)

Flutter-使用BottomNavigationBar来实现底部导航栏

m0_48259951的博客

03-20

523

最后，定义3个简单的页面HomePage、MessagesPage和ProfilePage，它们分别显示一个文本，用于表示当前处于哪个页面。在这个示例中，定义了一个有3个页面的底部导航栏，分别是"Home"、“Messages"和"Profile”。方法，当用户点击底部导航栏的某个按钮时，会调用此方法，在此方法中更新_currentIndex的值，然后调用。的列表，每个条目包含一个图标和一个标题。属性，它指定了当前选中的页面，以及。在Flutter中，可以使用。属性，它是一个包含3个。

参与评论您还未登录，请先登录后发表或查看评论

flutter BottomNavigationBarItem设置不显示title文字

theSmallTears的博客

12-19

3582

BottomNavigationBarItem( icon:Icon(Icons.book), title:newContainer(), backgroundColor:Colors.orange ), title 设置成 new Container(); 转至https://blog.csdn.net/jl...

Flutter BottomNavigationBar字体不显示问题

jwg1988的博客

12-27

1786

BottomNavigationBar的itemBottomNavigationBarItem超过三个后，icon下面文字不出现，如图：解决办法：给BottomNavigationBar增加一个type属性: type: BottomNavigationBarType.fixed, ...

flutter BottomNavigationBar BottomNavigationBarItem 去掉文字

最新发布

小韩的博客

10-19

310

调查怎么去除flutter 的底部导航文字怎么去除，经过一盘尝试，结果两个属性可以去掉文字解决垂直剧中问题 selectedFontSize: 0, unselectedFontSize: 0,

Flutter实现底部导航栏

wordgg的博客

10-24

555

先看效果如下：第一步：首先创建一个类，用于初始化 BottomNavigationBarItem所需要的信息。包含三个字段 name 文字， activeIcon选中图标 normalIcon未选中图标。并且初始化信息，如下图第二步：定义List<BottomNavigationBarItem>，并且在initState()中初始化。下面3处标记点， i...

Flutter系列-BottomNavigationBar使用

fong_simon的博客

12-12

730

先上效果图：正文： flutter新手，第一次开发，记录开发过程首先写了底部tab切换，使用的是官方widget-BottomNavigationBar 先上完整代码： main.dart import 'package:flutter/material.dart'; import 'package:sentaishenghuo/colorValue.dart'; impor...

Flutter实现底部导航栏效果

08-27

Flutter实现底部导航栏效果在本文中，我们将详细介绍如何使用Flutter实现底部导航栏效果。这是一个非常有价值的参考资料，感兴趣的小伙伴们可以参考一下。首先，我们需要在main.dart文件中定义APP的基本信息，...

flutter底部导航栏添加角标

01-20

在Flutter开发中，底部导航栏（Bottom Navigation Bar）是应用界面设计中常见的一种元素，用于在多个页面间切换。为了增强用户体验，有时我们需要在底部导航栏的图标上添加角标，来显示未读消息数量或其他状态提示。...

Flutter学习笔记仿闲鱼底部导航栏带有中间凸起图标

08-10

在本文中，我们将深入探讨如何使用Flutter来创建一个仿照闲鱼应用的底部导航栏，该导航栏具有独特的中间凸起图标。Flutter是一款由Google开发的开源UI工具包，用于构建高性能、高保真度的跨平台移动应用程序。它基于...

【Flutter】基础组件【08】BottomNavigationBar

俊而不逊的博客

11-28

1870

1. 写在前面在上篇文章中介绍了Flutter中的Appbar组件，今天继续学习【Flutter】基础组件中的BottomNavigationBar组件。【基础语法合集】【Flutter】Dart中的var、final 和 const基本使用【Flutter】Dart数据类型之num 【Flutter】Dart数据类型之String 【Flutter】Dart的数据类型list&Map(数组和字典) 【Flutter】Dart的方法与箭头函数【Flutter】Dart的方法中的可选参

Flutter中使用TabBar遇到的坑

u010212060的博客

06-03

6360

1.对TabController的监听在点击Tab后会执行两次每点击一次,监听都有两次回调解决: 对indexIsChanging进行判断 2.使用SingleTickerProviderStateMixin报错根据官方文档使用(自己也敲了些其他代码),但是报了个错 I/flutter ( 9971): A Single...

flutter BottomNavigationBarItem

09-17

475

非当前页面的item 的文字不显示，点击一项后显示当前页面，其他的又消失了我一开始以为是初始化的问题后来发现有一个属性 type: BottomNavigationBarType.fixed, 如此就好了...

BottomNavigationView控件item多于3个时文字不显示的解决方案

暴走的小新

05-27

3143

Api等级大于28时，BottomNavigationView控件item多于3个时文字不显示。在xml中添加一个属性就可以解决了。参考：https://www.jianshu.com/p/5e3b9f59a936， https://blog.csdn.net/lynchee/article/details/86062582 升级到API28后，只要设置属性就可以解决，如下： <com....

BottomNavigationBar 如何控制BottomNavigationBarItem 的 title默认不显示

Hu_wenpeng的博客

04-16

2597

默认情况下 title只有在 item被选中的时候才显示 BottomNavigationBar的构造里面有一个属性它是一个枚举类型看看这个type的默认值是：在这里的注释中我们找到了默认值我们设置 type 为 fixed试一下就显示了虽然问题已经解决了我们就是要显示我们Item里设置的title属性但为什么我们传了type = fixed就显示了呢？我们再返回上一...

flutter底部导航栏的坑

勤奋的年轻人

07-08

755

flutter 底部导航条页面切换不会执行生命周期函数之解决方案。发现问题，当底部导航栏实现方法不同的时候，创建页面的树页不同。我的问题是这样的，当我每次切换底部导航的时候，我切换的时候都不会触发这个页面的initState等各种生命周期函数，就只有第一次初始化的时候才有执行这些生命周期。然后最终发现原来是我的底部导航条使用的不行。发现问题前的代码重点看 IndexedStack ，第一次是这样写的。我将各个页面的代码写在了里面，从而导致页面一初始化的时候才会执行生命周期函数，后面的不会执

Flutter项目Invalid radix-10 number (at character 1)错误

yingkongshi07的博客

07-19

4473

错误如图: 解决方案一: 确定你的Flutter Channel是不是stable 笔者由于当初使用gallery例子时候,转换成了master channel,在Terminal中输入代码:flutter channel stable,错误修复成功 master 为当前最新的channel； dev 为当前最新且充分测试后的channel； beta 为每月Flutter官方调整选出来的最好的dev的channel； stable 为当前最稳定的channel。稳定性排序：maste..

flutter DropDown Button之 There should be exactly one item with [DropdownButton]‘s value: One...错误

yingkongshi07的博客

12-22

2411

解决方案: flutter要求DropdownButton中的value值与List<String> items中的值有重合换句话说,让你的value有一个固定的初始值,这里用图举例附上官方代码(可以直接copy): class _MyStatefulWidgetState extends State<MyStatefulWidget> { String dropdownValue = 'One'; @override Widget build(B.

Flutter项目Gallery官方示例导入错误小结

yingkongshi07的博客

07-17

1299

Futter Gallery官方示例资源(来自Github,原链接:github.com/flutter/gallery),附下载链接: download.csdn.net/download/yingkongshi07/20336881 必须:上述官方示例资源是master版本,请确保你的AS处于master channel 如何切换master channel: Terminal中运行代码: flutter channel master 可能的错误一: import "package: