使用Swiper
制作了轮播组件,而图片显示使用的CachedNetworkImage
;
在每张图片第一次被切换显示时,都会有一个加载的过程,对用户并不友好,所以就想着在图片显示前预加载对应的图片。
根据网上搜索到的flutter的PageView预加载图片的解决方法,进行了一些处理,就是在页面切换时预加载下一页图片的内容,并使用OffStage
进行预加载,从而实现了图片的预加载方法。
全部图片预加载:
Stack(
children: [
Swiper.children(
index: _mediaIndex,
loop: false,
itemHeight: 400,
onIndexChanged: (index) {
_mediaIndex = index;
},
children: List.generate(
imageUrlList.length,
(index) => CachedNetworkImage(
imageUrl: _imageUrlList[index],
),
),
),
Offstage(
offstage: true,
child: Column(
children: List.generate(
imageUrlList.length,
(index) => CachedNetworkImage(
imageUrl: _imageUrlList[index],
),
),
),
),
],
)
预加载下一张图片
Stack(
children: [
Swiper.children(
index: _mediaIndex,
loop: false,
itemHeight: 400,
onIndexChanged: (index) {
_mediaIndex = index;
},
children: List.generate(
imageUrlList.length,
(index) => CachedNetworkImage(
imageUrl: _imageUrlList[index],
),
),
),
Offstage(
offstage: true,
child: Column(
children:[
if (_mediaIndex > 0) CachedNetworkImage(
imageUrl: _imageUrlList[_mediaIndex - 1],
),
if (_mediaIndex < _imageUrlList.length - 1) CachedNetworkImage(
imageUrl: _imageUrlList[_mediaIndex + 1],
),
],
),
),
],
)
网友评论