开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Flutter - bottomNavigationBar中的SelectedItemColor不工作

Flutter是一种跨平台的移动应用开发框架，可以同时开发iOS和Android应用。bottomNavigationBar是Flutter中的一个组件，用于创建底部导航栏。在使用bottomNavigationBar时，有时会遇到SelectedItemColor不起作用的问题。

SelectedItemColor属性用于设置选中的导航项的颜色。如果该属性不起作用，可能是由于以下原因：

主题颜色设置不正确：在Flutter中，可以通过ThemeData来设置应用的主题样式。如果SelectedItemColor属性不起作用，可能是因为主题颜色设置不正确。可以尝试在主题中设置primaryColor属性为所需的选中颜色。
导航项未正确配置：bottomNavigationBar需要正确配置导航项，包括图标和文本。确保每个导航项都设置了相应的图标和文本，并且正确地指定了选中和未选中状态下的颜色。
Flutter版本不兼容：有时，某些Flutter版本可能存在bug或不兼容问题，导致SelectedItemColor属性不起作用。可以尝试更新Flutter版本或查看Flutter社区中是否有相关的问题报告和解决方案。

总结： Flutter的bottomNavigationBar组件中的SelectedItemColor属性用于设置选中导航项的颜色。如果该属性不起作用，可以尝试检查主题颜色设置、导航项配置和Flutter版本是否兼容等方面的问题。在解决问题时，可以参考腾讯云提供的Flutter开发文档和相关资源。

腾讯云相关产品和产品介绍链接地址：

腾讯云Flutter开发文档：https://cloud.tencent.com/document/product/1212
腾讯云移动应用开发服务：https://cloud.tencent.com/product/mapp
腾讯云移动应用开发解决方案：https://cloud.tencent.com/solution/mobile-app-development

相关搜索:Flutter -Adding a popup menu button to the BottomNavigationBar中的图标 Flutter 2.0 pushAndRemoveUntil不工作 Flutter AutofillHints oneTimeCode不工作 Flutter GestureDetector onTap不工作 Flutter Getx Snackbar不工作 Flutter SingleChildScrollView在堆栈中不工作 Flutter: BottomNavigationBar不更改活动图标颜色 Flutter: Promise中的导航器不工作 Flutter: ScrollController initialScrollOffset不工作 Flutter:如何去除BottomNavigationBar的边框？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

组件六、完整代码示例七、相关资源一、Scaffold 组件 ---- Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;..., 设置一个 BottomNavigationBar 组件 ; BottomNavigationBar 组件中可设置 int currentIndex 当前的索引 , ValueChanged?..., /// 都会根据当前点击的选项而改变 , /// 改变的时候有切换动画 /// 选中的状态下显示底部图标的文本 /// 不选中的状态下隐藏底部的文本内容 shifting...onTap 字段设置点击事件 , 传入的参数是点击的底部导航栏索引值 ; BottomNavigationBar 构造函数 : BottomNavigationBar({ Key?...= null && unselectedFontSize >= 0.0), selectedItemColor = selectedItemColor ??

5.6K5 0

Flutter Widgets 之 BottomNavigationBar

注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本：1.12.13+hotfix.5 Dart版本：2.7.0 BottomNavigationBar 和 BottomNavigationBarItem...配合Scaffold控件使用可以实现底部导航效果，类似于微信底部的导航效果，下面是一个简单的底部导航案例： Scaffold( bottomNavigationBar: BottomNavigationBar...currentIndex代表当前显示导航的索引，当前切换时调用onTap，在onTap回调中调用setState方法改变_currentIndex的值达到切换的效果。效果如下： ?...如果导航的图标是自己设计的图标，这时仅仅通过BottomNavigationBar是无法实现我们想要的效果的，比如微信的导航的效果，虽然选中和未选中也是颜色的区别，但图标不是Icons自带的图标，想要实现切换...推荐几款Github上带动画效果的底部导航 Fluid Button Bar https://github.com/gskinnerTeam/flutter_vignettes/tree/master

7193 0

在 Flutter 中使用 NavigationRail 和 BottomNavigationBar【Flutter专题33】

在 Flutter 中使用 NavigationRail 和 BottomNavigationBar “作者：坚果华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA...成员之一，专注于大前端技术的分享，包括Flutter,鸿蒙，小程序,安卓，VUE，JavaScript等。”...本文将向您展示如何使用NavigationRail和BottomNavigationBar在 Flutter 中创建自适应布局。我们将浏览一下这个概念，然后通过一个完整的例子来在实践中应用这个概念。...以下是它的工作原理：截图 chip 代码这是生成上述应用程序的完整代码（带有解释）： // main.dart import 'package:flutter/material.dart'; void...类 (flutter.dev) BottomNavigationBar 类(flutter.dev) 后记您已经学习了一种使用 NavigationRail 和 BottomNavigationBar

1.9K4 0

Flutter布局基础——BottomNavigationBar

Flutter布局基础——BottomNavigationBar 背景 Flutter中BottomNavigationBar类似于 iOS 中的UITabbarController，是导航控制器的一种...--more--> BottomNavigationBar的 type 属性，默认值会根据items的个数而定；当items个数小于4个时，默认值为BottomNavigationBarType.fixed...: 选中文字的 style type: icon 和文字的样式 unselectedItemColor: 未选中 Icon 的颜色 unselectedLabelStyle: 未选中文字样式代码如下：...，再把 items 中每个类单独拆出来，方便修改使用。...参考 BottomNavigationBar Dev Doc 20个Flutter实例视频教程让你轻松上手工作

2.8K3 0

掌握Flutter底部导航栏：畅游导航之旅

在Flutter中，底部导航栏也是一项强大的功能，开发者可以利用Flutter框架提供的丰富组件和灵活性，轻松实现各种样式和交互效果的底部导航栏。...本文将深入探讨Flutter中底部导航栏的实现方法，从基础的结构搭建到高级功能的应用，带领读者逐步掌握使用Flutter构建底部导航栏的技巧与窍门。...在Flutter中，开发者可以使用内置的BottomNavigationBar组件轻松创建和定制底部导航栏，同时结合其他Flutter组件和功能实现更丰富的导航体验。...创建底部导航栏的基本结构底部导航栏在Flutter中的创建可以通过两个主要的组件来实现：BottomNavigationBar和BottomNavigationBarItem。...4.1 更改选中项颜色和图标通过设置BottomNavigationBar的selectedItemColor属性，可以更改选中项的颜色。

1101 0

【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

, BoxDecoration 是最常用的装饰器 // 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration...回调事件 , 传入一个匿名回调函数 , 在该匿名方法中回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 , 之后 BottomNavigationBar..., BoxDecoration 是最常用的装饰器 // 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration...底部导航栏切换选项卡界面 ---- BottomNavigationBar 底部导航栏的 onTap 回调方法中 , 设置当前选中的选项卡索引 , 根据该索引值修改 Scaffold 组件的 body..., BoxDecoration 是最常用的装饰器 // 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration

2.2K0 0

Flutter中BottomNavigationBar 定义底部导航条

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，在Scaffold 组件中通过配置bottomNavigationBar来实现该功能。...BottomNavigationBarType.shifting 动画效果；利用BottomNavigationBar实现一个App的分页切换。首先是入口文件 main.dart。...import 'package:flutter/material.dart'; // 引入拆分的Tabs组件 import 'pages/Tabs.dart'; void main(){ runApp...// 主题 theme: ThemeData(primarySwatch:Colors.yellow), ); } } 以下是入口文件main.dart中引入的...BuildContext context) { return Container( child:Text("我是首页") ); } } Tabs.dart中引入的

8413 0

Flutter 中 BottomNavigationBar 定义底部导航条

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，在Scaffold 组件中通过配置bottomNavigationBar来实现该功能。...BottomNavigationBarType.shifting 动画效果； 6. onTap 点击Tab时的回调函数。利用BottomNavigationBar实现一个App的分页切换。...import 'package:flutter/material.dart'; // 引入拆分的Tabs组件 import 'pages/Tabs.dart'; void main(){ runApp...// 主题 theme: ThemeData(primarySwatch:Colors.yellow), ); } } 以下是入口文件main.dart中引入的...BuildContext context) { return Container( child:Text("我是首页") ); } } Tabs.dart中引入的

1.2K2 0

Flutter跨页面改变BottomNavigationBar选中下标

思路：解决方案1： flutter内有Provider的状态管理，可以定义一个全局的Provider ，在Main函数内装载，放入顶层结构中，全局访问Provider改变Provider的状态，以此来更新...elevation: 5.0, selectedFontSize: 12, unselectedFontSize: 12, selectedItemColor...(this.index); } 2.在BottomNavigationBar所属的widget文件内监听通知 , 此Widget应是一个有状态的Widget class _TabBarPageState...elevation: 5.0, selectedFontSize: 12, unselectedFontSize: 12, selectedItemColor...方案2 使用event_bus发送事件与监听事件的方式，向事件总线中添加了一个事件，需要定义发送的消息内容，同时发送者发送数据，监听者监听事件作出相应。可依据自我情况合理选择实现方案

1.1K2 0

Flutter BottomNavigation 底部导航详解及问题记录

Flutter BottomNavigation 底部导航详解主要是使用了 Scaffold下的 bottomNavigationBar 整个属性,在这个属性下,可以添加底部图标的背景色,选中颜色,...以及是否粘贴到底部,和导航的个数在app的主页面,home指向底部导航栏的组件 home: BottomNavigation(), 底部导航栏的组件集成 StatefulWidget 在内部创建一个带有状态的组件...int _currentIndex = 0; static const int mainNum = 0xFFFA8C16; 这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用...中查看预设颜色值在icons.dart中查看预设图标源码三个文件 main.dart import 'package:flutter/material.dart'; import '....: BottomNavigationBar( selectedItemColor: Colors.white, backgroundColor: Color(mainNum

3.1K1 0

flutter中bottomNavigationBar切换组件保存状态方案

原文链接 https://www.aiprose.com/blog/107 我们在开发的时候用底部导航栏是很常见的，flutter给我们默认带了bottomNavigationBar，但是发现你直接这样写的时候...切换组件的时候不刷新。...1.首先在有bottomNavigationBar的组件中加入pageview /* * 存储的四个页面，和android 中的 Fragment一样 */ var _pages;...2.在组件中实现AutomaticKeepAliveClientMixin 让我们的state实现with AutomaticKeepAliveClientMixin，必须要重写一个方法 @override...这两个必须要组合使用，才能实现保存状态不刷新，每个需要保存状态的组件都要with AutomaticKeepAliveClientMixin

1.8K2 0

flutter中bottomNavigationBar切换组件保存状态方案

原文链接 https://www.aiprose.com/blog/107 我们在开发的时候用底部导航栏是很常见的，flutter给我们默认带了bottomNavigationBar，但是发现你直接这样写的时候...切换组件的时候不刷新。...image 1.首先在有bottomNavigationBar的组件中加入pageview /* * 存储的四个页面，和android 中的 Fragment一样 */ var _pages...2.在组件中实现AutomaticKeepAliveClientMixin 让我们的state实现with AutomaticKeepAliveClientMixin，必须要重写一个方法 @override...image 这两个必须要组合使用，才能实现保存状态不刷新，每个需要保存状态的组件都要with AutomaticKeepAliveClientMixin。

1.9K2 0

Flutter 全局控制底部导航栏和自定义导航栏的方法

在Flutter中，枚举类型通常用于表示一组相关的选项或状态，例如不同的导航栏类型、主题模式、状态等。...在Flutter中，枚举类型的声明方式如下所示： enum NavigationType { bottomNavigationBar, customNavigationRail, } 在上面的示例中...例如，在Flutter应用中，我们可以定义一个枚举类型来表示导航栏的选择，如下所示： enum NavigationType { bottomNavigationBar, customNavigationRail...应用案例在这个应用案例中，我们将展示如何在一个 Flutter 应用中实现全局控制导航栏，根据用户的偏好动态切换底部导航栏和自定义导航栏。...代码实现：我们展示了一个完整的代码示例，演示了如何在 Flutter 应用中实现全局控制导航栏的功能。

1701 0

Flutter基础widgets教程-BottomNavigationBar篇

1 BottomNavigationBar 显示在应用程序的底部，用于在少量视图中进行选择，通常在三到五之间。...2 构造函数 BottomNavigationBar({ Key key, @required List items, ValueChanged...BottomNavigationBarType type, Color fixedColor, Color backgroundColor, double iconSize: 24.0, Color selectedItemColor...selectedFontSize: 24.0, 3.8 selectedItemColor：选中时BottomNavigationBarItem.icon和BottomNavigationBarItem.label...的颜色 selectedItemColor: Colors.green, 3.9 showSelectedLabels：是否为未选择的BottomNavigationBarItems显示标签 showSelectedLabels

1.6K15 14

Flutter 创建一个很酷的 Booking App UI

本教程中，我将向您展示如何使用 Flutter 创建一个很酷的 Booking App UI 这是一个非常酷的项目，您将在其中学习如何实现标签栏、具有水平滚动的列表视图以及如何创建底部Flutter...中的导航栏，所以不用多说，让我们开始吧。...我们的主页： main.dart import 'package:flutter/material.dart'; import 'package:travel_app/componenets/travelcard.dart...], ), ), ) ], ), ), bottomNavigationBar...: BottomNavigationBar( unselectedItemColor: Color(0xFFB7B7B7), selectedItemColor: Color

5466 0

本文主要介绍flutter聊天应用程序

本文主要介绍flutter聊天应用程序在本教程中，我将向您展示如何使用 Flutter 构建一个完整的聊天应用程序。...UI的源代码 import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( debugShowCheckedModeBanner..., selectedItemColor: Colors.blue, items: [ BottomNavigationBarItem(...，很少有这样的博客会变得非常有用。...当我发现这个博客并感谢传递到我的数据库的信息时。

6872 0

【腾讯云 Cloud Studio 实战训练营】Flutter体验

在本次训练营中，我们将通过App项目入口说明，基本文件说明，基础框架搭建，带您一步步编写一个基于 Flutter 的静态App系统。...本次体验中，我们将了解到：1、Cloud Studio 开发工具2、Flutter (UI)框架3、Dart语言4、App入口讲解5、App项目搭建6、App效果展示7、Cloud Studio 优缺点一...二、准备工作通过以下步骤，我们可以搭建出自己的工作空间。...图片3、配置工作空间参数在弹出的创建工作空间窗口中，您需要进行以下配置：空间名称空间描述工作类别代码来源开发环境规格配置图片4、确认并创建工作空间完成上述配置后，点击 “创建” 按钮确认创建新的工作空间...: BottomNavigationBar( selectedFontSize: 13, unselectedFontSize: 13, selectedItemColor

1791 0

【腾讯云 Cloud Studio 实战训练营】尝鲜体验Flutter编写一个App应用

在本次训练营中，我们将通过App项目入口说明，基本文件说明，基础框架搭建，带您一步步编写一个基于 Flutter 的静态App系统。...二、准备工作通过以下步骤，我们可以搭建出自己的工作空间。...: BottomNavigationBar( selectedFontSize: 13, unselectedFontSize: 13, selectedItemColor...Flutter可以与现有的代码一起工作，在全世界，Flutter正在被越来越多的开发者和组织使用。"; strImg = ".....缺点：对于手机端开发，真机调试是非常不友好的，在不打包的情况下，无法进行真机调试。开发中，对于扫码打开的页面点击效果和滑动效果体验极差。

2241 0

Flutter 多语言、主题切换之GetX库

，实际上GetX是非常强大的，功能很多，本篇文章中我们将介绍GetX的多语言切换和主题切换等功能。...正文为了让你更清晰的知道，这里我会结合实际开发中的一些操作方式和使用方式，让你可以更好用在自己的项目上。...，完成切换的工作，代码如下所示： import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '.....), ])), ); } } 上面属于GetX的常规使用，然后就是在body中根据当前的item下标来确定显示什么内容，底部的bottomNavigationBar...五、切换语言 ① my_home.dart 现在为了是我们的切换语言生效，在我们之前直接使用字符串的地方，现在就需要更改为Local中的键了，首先我们修改一下my_home.dart中的代码，如下图所示

530 0

Flutter学习笔记：BottomNavigationBar实现多个Navigation

不，女士们，先生们，来让我们把Navigation变得有趣。这是一个有BottomNavigationBar的app: ?...长话短说：创建一个带Scaffold和BottomNavigationBar的app。在每一个Scaffold中，为每个选项卡创建一个包含一个子项的Stack。...首先，看一下免责声明：本文假设您熟悉Flutter中的导航。更多知识，请参阅Navigation基础知识教程，以及Navigator，MaterialPageRoute和MaterialApp。...当新页面出现时，整个``BottomNavigationBar```及其内容会滑动。不酷。? ?...1_zSeQkAGwARf2KtSkZqgRSg.png 如果我们可以使用不是我们BottomNavigationBar的祖先的Navigator，那么它就会按预期工作。

4.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭