记一次Flutter踩坑之旅

Flutter Offstage+Swiper组件踩坑

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

界面

一个列表页，点击不同的item请求后台返回图片集合，然后使用swiper组件实现轮播图式的显示功能。

列表界面（如上）。

返回结果用swiper组件实现轮播图展示。（如上图）

bug截图

点击第一个item（瑞雯）后进入展示页显示的异常。（如上图）

log信息报的异常。（如上图）

bug分析

代码片段。（如上图）
使用了offstage组件控制swiper的显示与隐藏，当loading结束并且后台请求成功返回有数据时，显示该组件，反之隐藏。

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

bug修改

无数据时则不创建Swiper组件，有数据时再创建。（如上图）

再次运行正常显示了。（如上图）

小结

猜测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是否有影响。
暂作此记录。