美文网首页
28.取消Flutter首次运行启动app切换BottomNav

28.取消Flutter首次运行启动app切换BottomNav

作者: 凯司机 | 来源:发表于2020-06-11 09:18 被阅读0次

出现动画的原因:

BottomNavigationBarItem的子类被点击的时候,两张图片在首次切换时,高亮的图片还没有被加载,也就是没有出现在缓存中.....

加载过程行为:

第一次点击——>切换图片(图片被加载到内存中展示在页面上,Flutter自行进行缓存——整体来说这个过程相对于从缓存中直接读取图片来说还是比较耗时的,所以出现了图片切换闪动的效果)

所有的Item都被点击过后,再进行切换图片就不会再有闪动的动画。

解决的办法:

既然是加载的过程慢造成的,那就在app启动的时候先行进行底部item的图片加载缓存...再切换时就不会出现这个问题。

备注:习惯了原生点击效果的兄弟们,看到这个效果还是很难接受的......强迫症患者必须解决。

icon:Image.asset("assets/images/tabs/$iconName.png", width:32.0),

activeIcon:Image.asset("assets/images/tabs/${iconName}_active.png", width:32.0),

⚠️两者的区别:下面就是解决闪动问题的办法——

下面设置的意思是:无间隔的显示图片的切换,将闪烁问题解决掉。

icon:Image.asset("assets/images/tabs/$iconName.png", width:32.0, gaplessPlayback:true),

activeIcon:Image.asset("assets/images/tabs/${iconName}_active.png", width:32.0, gaplessPlayback:true),

相关文章

网友评论

      本文标题:28.取消Flutter首次运行启动app切换BottomNav

      本文链接:https://www.haomeiwen.com/subject/mttmtktx.html