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

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

---

根本用法

最简朴的用法是提供一个图片的 URL：
dart
复制

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

复制代码

---

常用参数

Image.network 提供了很多参数来定制图片的加载和体现举动。以下是一些常用的参数：
1. src (必填)

图片的 URL 地点。
dart
复制

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

复制代码

2. headers

设置 HTTP 哀求头，比方禁用缓存：
dart
复制

2. Image.network(
3.   'https://example.com/image.png',
4.   headers: {
5.     'Cache-Control': 'no-cache',
6.   },
7. )

复制代码

3. width 和 height

设置图片的宽度和高度：
dart
复制

2. Image.network(
3.   'https://example.com/image.png',
4.   width: 200,
5.   height: 200,
6. )

复制代码

4. fit

设置图片的添补方式，常见的值有：

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

dart
复制

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

复制代码

5. alignment

设置图片的对齐方式，比方居中：
dart
复制

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

复制代码

6. color 和 colorBlendMode

为图片添加颜色滤镜：
dart
复制

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

复制代码

7. loadingBuilder

自界说图片加载过程中的体现内容：
dart
复制

2. Image.network(
3.   'https://example.com/image.png',
4.   loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
5.     if (loadingProgress == null) {
6.       return child; // 加载完成，显示图片
7.     }
8.     return Center(
9.       child: CircularProgressIndicator(
10.         value: loadingProgress.expectedTotalBytes != null
11.             ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
12.             : null,
13.       ),
14.     );
15.   },
16. )

复制代码

8. errorBuilder

自界说图片加载失败时的体现内容：
dart
复制

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

复制代码

9. frameBuilder

自界说图片加载过程中的动画结果：
dart
复制

2. Image.network(
3.   'https://example.com/image.png',
4.   frameBuilder: (BuildContext context, Widget child, int? frame, bool wasSynchronouslyLoaded) {
5.     if (wasSynchronouslyLoaded) {
6.       return child; // 图片已同步加载完成
7.     }
8.     return AnimatedOpacity(
9.       child: child,
10.       opacity: frame == null ? 0 : 1,
11.       duration: const Duration(seconds: 1),
12.       curve: Curves.easeOut,
13.     );
14.   },
15. )

复制代码

10. cacheWidth 和 cacheHeight

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

2. Image.network(
3.   'https://example.com/image.png',
4.   cacheWidth: 100,
5.   cacheHeight: 100,
6. )

复制代码

11. repeat

设置图片的重复方式，比方平铺：
dart
复制

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

复制代码

12. filterQuality

设置图片的过滤质量，比方 FilterQuality.low 或 FilterQuality.high：
dart
复制

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

复制代码

---

完备示例

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

2. import 'package:flutter/material.dart';
4. void main() {
5.   runApp(MyApp());
6. }
8. class MyApp extends StatelessWidget {
9.   @override
10.   Widget build(BuildContext context) {
11.     return MaterialApp(
12.       home: Scaffold(
13.         appBar: AppBar(title: Text('Image.network 示例')),
14.         body: Center(
15.           child: Image.network(
16.             'https://example.com/image.png',
17.             width: 300,
18.             height: 200,
19.             fit: BoxFit.cover,
20.             headers: {
21.               'Cache-Control': 'no-cache',
22.             },
23.             loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
24.               if (loadingProgress == null) {
25.                 return child;
26.               }
27.               return CircularProgressIndicator(
28.                 value: loadingProgress.expectedTotalBytes != null
29.                     ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
30.                     : null,
31.               );
32.             },
33.             errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
34.               return Text('加载失败');
35.             },
36.           ),
37.         ),
38.       ),
39.     );
40.   }
41. }

复制代码

---

总结

Image.network 是一个非常强盛的工具，可以轻松加载和体现网络图片。通过公道使用其参数，你可以实现图片的自界说加载、错误处理处罚、动画结果等功能。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。