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