Flutter 中如何加载网络图片？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. `Image.network` 的基本用法

Image.network 是 Flutter 提供的一个用于加载网络图片的便捷方法。它接受一个 URL 字符串作为参数，并自动处理图片的下载和显示。

Image.network('https://example.com/image.png');

2. 设置图片的宽高

可以通过 width 和 height 参数来设置图片的宽高。如果不设置，图片将根据其原始尺寸显示。

Image.network(
  'https://example.com/image.png',
  width: 200,
  height: 200,
);

3. 图片的缩放模式

fit 参数用于控制图片的缩放模式。常见的模式有：

BoxFit.cover：保持图片的宽高比，覆盖整个容器。
BoxFit.contain：保持图片的宽高比，确保图片完全显示在容器内。
BoxFit.fill：拉伸图片以填充整个容器，可能会改变图片的宽高比。

Image.network(
  'https://example.com/image.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
);

4. 加载过程中的占位符

可以使用 placeholder 参数来指定在图片加载过程中显示的占位符。通常使用 AssetImage 或 NetworkImage 来加载本地或网络上的占位符图片。

// www.javascriptcn.com code example
Image.network(
  'https://example.com/image.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  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,
      ),
    );
  },
);

5. 错误处理

可以使用 errorBuilder 参数来处理图片加载失败的情况。例如，显示一个错误图标或提示信息。

// www.javascriptcn.com code example
Image.network(
  'https://example.com/image.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
    return Center(
      child: Icon(Icons.error),
    );
  },
);

6. 缓存控制

Flutter 默认会缓存网络图片，以提高加载速度。如果需要控制缓存行为，可以使用 CachedNetworkImage 包，它提供了更灵活的缓存策略。

CachedNetworkImage(
  imageUrl: 'https://example.com/image.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
);

通过以上方法，你可以在 Flutter 中灵活地加载和显示网络图片。

Flutter 中如何加载网络图片？

推荐答案