Question

我正在尝试使用Image.network构造函数的loadingBuilder参数。

在加载图像时，我想显示一个CircularProgressIndicator，其值设置为下载比率除以预期文件大小的比率。我希望可以使用ImageChunkEvent参数的cumulativeBytesLoaded，expectedTotalBytes来做到这一点。

我在文档中找到了sample：

以下示例在通过网络加载图像时使用loadingBuilder来显示CircularProgressIndicator。

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    if (loadingProgress == null)
      return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
            : null,
      ),
    );
  },
),

但是问题是loadingProgress始终是null，所以我正在做的整个loadingBuilder伪装毫无意义。

为什么ImageChunkEvent loadingProgress不传递给具有真实值的loadingBuilder函数？

Answer 1

记住将或gif放在assets文件夹中，并在pubspec.yaml中引用它

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://backend.example.com/image.png',
);

有关更多信息： https://api.flutter.dev/flutter/widgets/FadeInImage-class.html

Answer 2

也许图像尺寸较小，因此可以立即加载，请尝试使用其他较大的网络图像进行测试。

Image.network loadingBuilder的加载进度事件为null

2 个答案: