Swiper/PageView预加载图片

2023-04-10  本文已影响0人  移动开发_ziank

使用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],
                ),
              ],
            ),
          ),
        ],
      )
上一篇 下一篇

猜你喜欢

热点阅读