美文网首页
Swiper/PageView预加载图片

Swiper/PageView预加载图片

作者: 移动开发_ziank | 来源:发表于2023-04-10 14:00 被阅读0次

    使用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],
                    ),
                  ],
                ),
              ),
            ],
          )
    

    相关文章

      网友评论

          本文标题:Swiper/PageView预加载图片

          本文链接:https://www.haomeiwen.com/subject/natwddtx.html