当前位置：首页 > article >正文

Flutter中网络图片加载显示Image.network的具体用法

article 2025/3/15 2:48:58

Image.network的具体用法

Image.network 是 Flutter 中用于从网络加载图片的便捷方法。它基于 NetworkImage，可以快速加载并显示网络图片。以下是 Image.network 的具体用法和常见参数说明。

基本用法

最简单的用法是提供一个图片的 URL：

dart

复制

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

常用参数

Image.network 提供了许多参数来定制图片的加载和显示行为。以下是一些常用的参数：

1. `src` (必填)

图片的 URL 地址。

dart

复制

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

2. `headers`

设置 HTTP 请求头，例如禁用缓存：

dart

复制

Image.network(
  'https://example.com/image.png',
  headers: {
    'Cache-Control': 'no-cache',
  },
)

3. `width` 和 `height`

设置图片的宽度和高度：

dart

复制

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

4. `fit`

设置图片的填充方式，常见的值有：

BoxFit.cover：保持宽高比，填满整个空间。
BoxFit.contain：保持宽高比，完整显示图片。
BoxFit.fill：拉伸图片以填满整个空间。

dart

复制

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

5. `alignment`

设置图片的对齐方式，例如居中：

dart

复制

Image.network(
  'https://example.com/image.png',
  alignment: Alignment.center,
)

6. `color` 和 `colorBlendMode`

为图片添加颜色滤镜：

dart

复制

Image.network(
  'https://example.com/image.png',
  color: Colors.blue,
  colorBlendMode: BlendMode.colorBurn,
)

7. `loadingBuilder`

自定义图片加载过程中的显示内容：

dart

复制

Image.network(
  'https://example.com/image.png',
  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,
      ),
    );
  },
)

8. `errorBuilder`

自定义图片加载失败时的显示内容：

dart

复制

Image.network(
  'https://example.com/invalid-url.png',
  errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
    return Text('加载失败');
  },
)

9. `frameBuilder`

自定义图片加载过程中的动画效果：

dart

复制

Image.network(
  'https://example.com/image.png',
  frameBuilder: (BuildContext context, Widget child, int? frame, bool wasSynchronouslyLoaded) {
    if (wasSynchronouslyLoaded) {
      return child; // 图片已同步加载完成
    }
    return AnimatedOpacity(
      child: child,
      opacity: frame == null ? 0 : 1,
      duration: const Duration(seconds: 1),
      curve: Curves.easeOut,
    );
  },
)

10. `cacheWidth` 和 `cacheHeight`

设置图片的缓存分辨率（以像素为单位），用于优化内存占用：

dart

复制

Image.network(
  'https://example.com/image.png',
  cacheWidth: 100,
  cacheHeight: 100,
)

11. `repeat`

设置图片的重复方式，例如平铺：

dart

复制

Image.network(
  'https://example.com/image.png',
  repeat: ImageRepeat.repeat,
)

12. `filterQuality`

设置图片的过滤质量，例如 FilterQuality.low 或 FilterQuality.high：

dart

复制

Image.network(
  'https://example.com/image.png',
  filterQuality: FilterQuality.low,
)

完整示例

以下是一个完整的示例，展示了 Image.network 的常见用法：

dart

复制

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image.network 示例')),
        body: Center(
          child: Image.network(
            'https://example.com/image.png',
            width: 300,
            height: 200,
            fit: BoxFit.cover,
            headers: {
              'Cache-Control': 'no-cache',
            },
            loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
              if (loadingProgress == null) {
                return child;
              }
              return CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                    : null,
              );
            },
            errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
              return Text('加载失败');
            },
          ),
        ),
      ),
    );
  }
}