首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

颤动:轻触时BottomNavigationBar上的选定图标不会改变

颤动是指在触摸移动设备底部导航栏(BottomNavigationBar)上的选定图标时,图标不会发生变化的现象。

底部导航栏是移动应用界面中常见的一种导航方式,通常位于屏幕底部,用于快速切换应用的不同功能模块或页面。BottomNavigationBar通常由多个图标组成,用户可以通过轻触这些图标来切换到相应的页面或功能。

然而,在某些情况下,当用户轻触导航栏上的选定图标时,图标不会发生变化,也就是出现了颤动的现象。这可能是由于开发工程师在实现导航栏功能时未正确处理触摸事件,导致选定图标状态未正确更新。

为了解决底部导航栏颤动的问题,开发工程师可以采取以下步骤:

  1. 检查代码逻辑:检查底部导航栏相关的代码逻辑,确保正确处理了图标的选中状态。
  2. 检查触摸事件:检查底部导航栏的触摸事件处理代码,确认是否正确响应用户的触摸操作,并根据触摸位置更新图标的选中状态。
  3. 更新图标状态:在触摸事件处理代码中,根据用户的触摸位置,更新选中图标的状态,使其能够正确地反映用户的操作。
  4. 测试和调试:对修复后的代码进行全面测试和调试,确保底部导航栏功能正常,选定图标能够正确更新。

腾讯云提供了一系列与移动应用开发相关的产品,例如腾讯移动应用开发套件(Mobile Application Development Kit,MADK)和腾讯移动推送(Tencent Push Notification,TPNS),可以帮助开发者快速搭建移动应用,并提供消息推送等功能。你可以通过腾讯云官网了解更多相关产品信息:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter Widgets 之 BottomNavigationBar

点击其他2个item没有反应,添加切换效果: int _currentIndex = 0; BottomNavigationBar( onTap: (int index) {...currentIndex代表当前显示导航索引,当前切换时调用onTap,在onTap回调中调用setState方法改变_currentIndex值达到切换效果。 效果如下: ?...我们还可以设置其背景颜色(backgroundColor)、图标大小(iconSize)、选中和未选中图标、字体颜色,大小等。...如果导航图标是自己设计图标,这时仅仅通过BottomNavigationBar是无法实现我们想要效果,比如微信导航效果,虽然选中和未选中也是颜色区别,但图标不是Icons自带图标,想要实现切换...推荐几款Github带动画效果底部导航 Fluid Button Bar https://github.com/gskinnerTeam/flutter_vignettes/tree/master

77530

【Flutter 专题】11 底部状态栏了解下?

和尚今天来整理一下在学习测试 Flutter 需用到底部导航栏 BottomNavigationBar,使用方式很简单,和尚感觉效果比原生 Android 要好一些。...BottomNavigationBar 为底部导航栏控件,可以包含文字标签和图标等基本信息,通常在三到五个之间;据了解,iOS 规范底部导航栏最多可设置五个,所以大部分应用均在五个以内;现在很多应用都是以底部导航栏...与 body 同级位置添加 BottomNavigationBar,BottomNavigationBarItem 中可以添加文字标签或图标 (Icons/Image) 等,若图片不存在时会显示空白;...PageView 会切换内容,但是底部状态栏并没有改变样式,因为目前用固定图标和文字,此时需要处理图标和文字切换样式,如下: var _bottomText = ['签到', '我']; var...然而和尚添加了更改状态样式,点击底部状态栏依旧不会变色;和尚查了很久突然发现,和尚 HomePage() 继承是 StatelessWidget 无状态样式,此时更换为 StatefulWidget

1.7K41
  • Flutte部件目录-Material Components 顶

    导航栏背景色是默认材质背景色ThemeData.canvasColor(实质是不透明白色)。 BottomNavigationBarType.shifting,有四个或更多项目默认值。...TabBarView 显示与当前选定选项卡相对应部件页面视图。 通常与TabBar结合使用。 ?...一个凸起按钮由一个矩形材料悬停在界面上。 ? ? FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容以提升应用程序中主要操作。...FlatButton 平面按钮是在材料组件部件打印部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印在材质小部件图片,通过填充颜色(墨水)对触摸作出反应。 ?...将按钮封装在工具提示窗口小部件中,以便在按下窗口小部件(或者当用户采取其他适当操作)显示标签。 ? DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品中。

    9.4K40

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

    可以改变页面状态 ; 设置一个成员变量 , 标识当前选中索引值 ; /// 当前被选中底部导航栏索引 int _currentSelectedIndex = 0; 将 BottomNavigationBar...setState(() { // 改变 int _currentSelectedIndex 变量状态 _currentSelectedIndex...// 改变 int _currentSelectedIndex 变量状态 _currentSelectedIndex = index; });...对应组件 , 如果选项卡索引为 0 , 显示组件 0 , 如果选项卡索引为 1 , 那么显示组件 1 ; 设置 body 字段值 , 根据当前被中选选项卡索引值 , 判断应该显示哪个组件 ; body...// 改变 int _currentSelectedIndex 变量状态 _currentSelectedIndex = index; });

    2.3K00

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

    , // 右下角悬浮按钮 ( 可改变位置 ) this.floatingActionButtonLocation, this.floatingActionButtonAnimator..., 同一间只显示一个 ; 三、BottomNavigationBar 底部导航栏 ---- 通过 Scaffold 组件 bottomNavigationBar 字段 , 可以设置底部导航栏菜单..., /// 都会根据当前点击选项而改变 , /// 改变时候有切换动画 /// 选中状态下显示底部图标的文本 /// 不选中状态下隐藏底部文本内容 shifting...onTap 字段设置点击事件 , 传入参数是点击底部导航栏索引值 ; BottomNavigationBar 构造函数 : BottomNavigationBar({ Key?..., http://flutter.axuer.com/docs/ Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 ) GitHub

    6K50

    在 Flutter 中创建漂亮底部导航栏

    ConvexBottomBar是一个底部导航栏组件,用于展现凸起TAB效果,支持多种内置样式与动画交互。你可以在https://appbar.codemagic.app找到在线样例。...如何使用: 通常, 「ConvexAppBar」 可以通过设置它 bottomNavigationBar 来与脚手架一起工作。...提供Builder API以自定义新样式 在AppBar添加徽章 支持优雅过渡动画 提供Hook API来重载一些内部样式 RTL布局支持 属性: 下面是 「*Convex_Bottom_Bar*...」 一些属性: 「fixed」 (副标题图标停留在中心) 「fixedCircle」 (相同,但在固定图标的所有边上都有一个白色圆圈) 「react」 (上标图标取代点击另一个图标) 「reactCircle...」 (与上标图标白色圆圈相同) 「textIn」 (选定离子出现相应标题) 「titled」 (未选择图标是显示其标题单个图标) 「flip」 (点击图标显示一个 flip 动画) 「custom

    8K10

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

    4.1 更改选中项颜色和图标 通过设置BottomNavigationBarselectedItemColor属性,可以更改选中项颜色。...要调整底部导航栏高度,可以使用BottomNavigationBarfixedHeight属性来指定固定高度,也可以使用BottomNavigationBarselectedIconTheme属性来调整图标的大小...通过设置Container背景颜色、圆角和文本内容,我们可以实现不同样式徽章,并通过动态改变文本内容来实现不同数量提示。...7.3 实现底部导航栏动画效果 为了提升用户体验,有时候我们还可以为底部导航栏添加一些动画效果,例如切换导航项渐变动画、滑动导航栏缩放动画等。...,通过在build方法中根据当前选中导航项来动态改变容器颜色,从而实现了底部导航栏渐变动画效果。

    28010

    【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

    ; 设置当前索引 : BottomNavigationBar currentIndex 属性设置当前底部导航栏选中索引 , 为其设置一个变量 , 改变该变量值后 , 通过 setState 方法更新..., color: Colors.grey, ), /// 选中状态下图标, 红色 activeIcon...与 PageView 关联 ---- BottomNavigationBar 被动设备选中状态 : BottomNavigationBar 索引通过一个在组件内部定义私有变量 _currentIndex...私有变量 , 即可控制 BottomNavigationBar 选中状态 ; BottomNavigationBar 主动设置选中状态 : 在 BottomNavigationBar onTap..., http://flutter.axuer.com/docs/ Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 ) GitHub

    4.3K20

    Android使用BottomNavigationBar实现导航栏功能

    BottomNavigationBar.MODE_FIXED) //填充模式,未选中Item会显示文字,没有换挡动画 setMode(BottomNavigationBar.MODE_SHIFTING...) //换挡模式,未选中Item不会显示文字,选中会显示文字 setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC) //点击时候没有水波纹效果...setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE) //点击时候有水波纹效果,也就是导航条背景色是你设置处于选中状态...子项,设置图标和文字 setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)) //添加选中变更图标 setFirstSelectedPosition...view源码下载地址 总结 以上所述是小编给大家介绍Android BottomNavigationBar导航栏功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家

    97741

    谷歌官方导航控件BottomNavigationBar日常使用

    BottomNavigationBar和其他控件配合是完全解耦,日常使用分为BottomNavigationBar+ViewPager 、BottomNavigationBar+FrameLayput...;默认颜色为Theme’s Primary Color active color : 在BACKGROUND_STYLE_STATIC下,为图标和文本激活或选中颜色;在BACKGROUND_STYLE_RIPPLE...下为图标和文本被激活或选中颜色;默认颜色为Color.WHITE 4.自定义Item颜色Individual BottomNavigationItem Colors 如果Item选中/未选中颜色需要特殊处理...0dp,默认为8dp 6.自定义选项图标BottomNavigationItem Icon Customisations 可以设置选项,选中和未选中使用不同图标 //setInactiveIcon...();//隐藏 bottomNavigationBar.show();//显示 展示和隐藏动画模式 默认都是动画模式,参数传false可以关闭动画 bottomNavigationBar.hide

    30430

    flutter仿微信底部图标渐变功能实现代码

    pageViewcontroller可以监听到pageView滚动事件,也可以获取pageView滚动位置,所以我们在滚动事件中根据位置去改变对应图标颜色就可以实现了。...改变图标颜色 图标是从微信中提取出来,都是webp格式图片。要改变图片颜色可以使用ImageIcon这个组件。...里面有3个参数,a和b都是颜色,t是夹在0到1之间,当t为0返回a,当t为1返回b 也就是在滚动事件中,计算出 t ,根据 t 改变图标颜色就可以实现上面的效果了。...管理图标颜色 因为我是用了自带底部导航BottomNavigationBar,在pageController滚动事件中改变图标颜色太麻烦了,所以用了Stream来管理图标的状态。...默认图标颜色线性渐变,选中图标透明度渐变。flutter实现这个用自带BottomNavigationBar估计不行,可能需要自定义一个底部导航。

    1.3K40

    谷歌官方导航控件BottomNavigationBar日常使用

    BottomNavigationBar和其他控件配合是完全解耦,日常使用分为BottomNavigationBar+ViewPager 、BottomNavigationBar+FrameLayput...;默认颜色为Theme’s Primary Color   active color : 在BACKGROUND_STYLE_STATIC下,为图标和文本激活或选中颜色;在BACKGROUND_STYLE_RIPPLE...下为图标和文本被激活或选中颜色;默认颜色为Color.WHITE   4.自定义Item颜色Individual BottomNavigationItem Colors   如果Item选中/未选中颜色需要特殊处理...0dp,默认为8dp   6.自定义选项图标BottomNavigationItem Icon Customisations   可以设置选项,选中和未选中使用不同图标   //setInactiveIcon...();//隐藏 bottomNavigationBar.show();//显示   展示和隐藏动画模式   默认都是动画模式,参数传false可以关闭动画   bottomNavigationBar.hide

    2K50

    Flutter 入门指北之快速搭建界面(含Flutter知识体系)

    一篇讲完 Flutter 中一些基本部件,这篇就先填完上篇留下没写 AppBar 坑,以及 Scaffold 其他参数使用,在开始前,先补一张缩略版脑图 ?...(8.0), this.child, // 用于自定义按钮内容 this.icon, // 按钮图标 this.offset = Offset.zero, // 展示时候便宜...,这边切换 PageView 页面后,TabBar 也需要随之改变 // 通过 tabController 来改变 TabBar 显示位置 _tabController.index...能够使我们快速去搭建一个界面,但是,并不是所有的界面都需要 AppBar 这个标题,那么我们就不会传入 appBar 属性,我们注释 _HomePageState 中 Scaffold appBar...,当手势从左侧滑出或者点击 leading 图标,抽屉就出来了 AppBar - bottomNavigationBar bottomNavigarionBar 可以传入一个 BottomNavigationBar

    1.7K20
    领券