从网络加载图像时 Flutter listview 移动

Question

我正在尝试制作一个列表视图，其中包含从网络加载的大量不同尺寸的图像。当我向下滚动时一切正常，但是当我向上滚动时，第一张图像开始加载并改变列表视图的位置。我想我需要为具有图像高度的图像占位符，但我不知道如何在加载它们之前获取它们的尺寸。或者我需要像 listview 这样的 smth，它不会因为 smth upper loading 而移动。

Answer 1

您可以使用 SizedBox 覆盖图像。

SizedBox(height: 60, child: Image.network(""),)

Answer 2

我写了一个函数在一个循环中获取图像的高度（收藏夹数组包含地图，如果加载，地图包含 url 参数和高度参数）。该函数还通过公式 MediaQuery.of(context).size.width - 80 将图像的高度转换为我实际需要的大小，这是屏幕上图像的宽度。（屏幕宽度每边减去 40 个内边距）。

这是获取高度函数的代码：

Future<void> getImageHeight(String url, index) async {
    Image image = Image.network(url);
    image.image
        .resolve(const ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool isSync) {
      favorites[index]['height'] = info.image.height *
          ((MediaQuery.of(context).size.width - 80) / info.image.width);
      setState(() {});
    }));
}

这是带有占位符（容器）的图像代码：

Container(
    color: const Color(0xffE8E6EA),
    height: favorites[index]['height'] == null || favorites[index
            ['height'].isNaN ? 0: favorites[index]['height'],
    child: Image.network(
        favorites[index]['url'],
            width: double.infinity,
    ),
),

第一次加载时占位符的大小仍然为零，因为获取它们的高度需要时间。但是过了一段时间（通常需要大约一秒或更短时间）setState 将被调用并且图像不会在滚动时滞后。如果您不是一次从数据库加载图像 urls，您将需要重新运行函数以获取新添加图像的高度。

Answer 3

将 minCacheExtend 设置得足够大（要高于最高图片的高度）

从网络加载图像时 Flutter listview 移动

Flutter listview moving when loading images from network

listview

dart

flutter