使用 flutter_swiper,在首页实现显示图片轮播,效果是没问题,具体布局参见Flutter APP开发 学习记录: flutter_swiper轮播图 我这篇文章的代码实现,底部导航菜单布局参见Flutter APP开发 学习记录: bottomNavigationBar底部导航菜单我这篇文章的代码实现。
代码不再赘述,太长。
现在我的问题是:在首页上,通过底部导航菜单点击跳转到另一个页面后,再回到首页,轮播图会出现疯狂的切换图片轮播一段时间后停下来继续以正常速度轮播,这是什么原因呢?
通过别的文章 Flutter 三种方式实现页面切换后保持原页面状态,了解到 :
在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态
对上面说的丢失原页面状态不太理解,那我这个导航栏切换页面后轮播图会出现疯狂的切换图片轮播一段时间后停下来继续以正常速度轮播,这种情况是因为丢失状态了还是保持了状态造成的?有点不太懂。尝试了实现底部导航切换时保持原页面状态,轮播图依然不正常。
请问,这是什么原因呢?又该怎么解决呢?
ps:flutter开发小白,最近学习flutter开发app,就剩下这个问题还没解决了。。。。
这个问题解决了,原因是点击切换底部导航菜单时,每次进入首页,轮播图的数据都是重新请求接口重新获取了,每次接口重新请求成功后,setState更新视图,数据imageList变成空又变成有数据,就造成了疯狂的切换图片轮播一段时间后停下来继续以正常速度轮播。
解决办法:先按照 Flutter 三种方式实现页面切换后保持原页面状态这里的实现页面切换后保持原页面状态后,然后在请求接口处增加一个isLoading,然后在Container的child处增加一个判断:
这样就不会出现疯狂切换了。
具体代码详细参见:Flutter APP开发 学习记录: flutter_swiper轮播图 我在这篇文章贴了具体的原始代码和解决该问题后修改的代码。
当然了,这个问题解决了,每次切换导航就重新请求的问题还需要优化,继续按照 Flutter 三种方式实现页面切换后保持原页面状态这里的第三步第四步做下去,就能实现优化了。