Flutter lazy image - koocyton`s blog

说个漫画类 APP 加载

flutter listview 因为要释放屏幕外的图片，

那么会状态刷新时，前面的图片高度会变成 0

使得滚动乱跳。那么可以用 Sizedbox 将图片框起来

当图片加载后，计算图片的高度，将这个高度赋值给 sizedbox

这样 List 里的每个元素高度就被固定了，滚动起来不会乱跳

用 customscroll 应该更合适些，因为每个元素的高度不一致

代码

ListView.builder(
  itemCount: controller.chapterImagesRx.length,
  padding: EdgeInsets.all(0),
  controller: controller.scrollController,
  itemBuilder: (c, o){
    String imageUrl = controller.chapterImagesRx[o];
    imageUrl = imageUrl.startsWith("//") ? "https:$imageUrl" : imageUrl;

    // image
    final Image image = Image.network(
      imageUrl,
      fit: BoxFit.contain
    );

    // stream
    final ImageStream stream = image.image.resolve(ImageConfiguration.empty);

    // listener
    stream.addListener(
      // 加载完图片，拿到图片的高度，赋值给图片的容器
      ImageStreamListener((ImageInfo info, bool _) {
        final uii.Image image = info.image;
        final imageWidth = image.width.toDouble();
        final imageHeight = image.height.toDouble();
        // 注意在这里设置高度
        controller.chapterImagesHeightRx[o] = ui.windowWidth * (imageHeight/imageWidth);
      }),
    );
    // 图片的容器
    return SizedBox(
      // 在这里使用高度
      height: controller.chapterImagesHeightRx[o],
      child: image,
    );
  }
);

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。也欢迎您共享此博客，以便更多人可以参与。如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。谢谢！

说个漫画类 APP 加载

代码

特色标签