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