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