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

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 {@overrideWidget 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('加载失败');},),),),);}
}

---

总结

Image.network 是一个非常强大的工具，可以轻松加载和显示网络图片。通过合理使用其参数，你可以实现图片的自定义加载、错误处理、动画效果等功能。