Flutter Offstage+Swiper组件踩坑

Flutter的Offstage+Swiper组件踩坑记录。

界面

一个列表页,点击不同的item请求后台返回图片集合,然后使用swiper组件实现轮播图式的显示功能。
记一次Flutter踩坑之旅
列表界面(如上)。

记一次Flutter踩坑之旅
返回结果用swiper组件实现轮播图展示。(如上图)

bug截图

记一次Flutter踩坑之旅
点击第一个item(瑞雯)后进入展示页显示的异常。(如上图)
记一次Flutter踩坑之旅
log信息报的异常。(如上图)

bug分析

记一次Flutter踩坑之旅
代码片段。(如上图)
使用了offstage组件控制swiper的显示与隐藏,当loading结束并且后台请求成功返回有数据时,显示该组件,反之隐藏。

记一次Flutter踩坑之旅
记一次Flutter踩坑之旅

再根据log信息点进去查看,猜测应该是并无数据时,scrollController并无可滑动的ScrollPosition。但是后台请求数据是有返回的(文字有显示),只是图片没有显示。而图片是用Swiper组件轮播显示的,外层的父组件Offstage通过offstage属性控制显示或隐藏,但是不管显示还是隐藏,这个组件都要渲染的。

bug修改

记一次Flutter踩坑之旅
记一次Flutter踩坑之旅无数据时则不创建Swiper组件,有数据时再创建。(如上图)

记一次Flutter踩坑之旅
再次运行正常显示了。(如上图)

小结

猜测Offstage不管显示隐藏都会渲染组件,Swiper创建后,item无数据,所以报了“ScrollController not attached to any scroll views”异常。

未解决问题

刚学Flutter不久,头一次写博客,纯粹为了记录一下,因为还有一处疑问暂时没有找到解决点。在追踪bug的过程中,尝试了很多种可能。
1:点击第三个item(盲僧李青),能够进入到图片界面并成功显示(图2),也并未报任何异常。
2:查看后台数据时,李青item的请求结果配的是10条数据,瑞雯item的请求结果配的是9条数据,劫item(第二个item)的请求结果配的是6条数据(也未能成功展示,报了同样的异常)。于是尝试多次后发现当返回数据长度<=5或者=10时是可以正常显示的,其他数据长度都报同样的异常。
3:在第一个列表界面使用了ListView,设置了scrollerController,并且在第一个列表界面一次请求结果配的是5条数据,查资料的过程中看有的说scrollerController可以共用,所以不知道第一个界面scrollerController是否有影响。
暂作此记录。

相关文章:

  • 2021-08-02
  • 2021-07-20
  • 2021-12-01
  • 2021-06-28
  • 2022-01-22
  • 2021-09-07
  • 2017-12-21
  • 2019-03-25
猜你喜欢
  • 2021-05-31
  • 2021-07-27
  • 2021-10-29
  • 2021-08-15
  • 2021-09-29
  • 2021-12-23
  • 2021-05-24
相关资源
相似解决方案