← 返回首页

🖼️ 图片组件详解

Flutter 提供了多种图片加载方式，支持本地图片、网络图片、文件图片等，并提供了渐入动画等高级功能。

📁 Image.asset

Image.asset 用于加载应用内的本地图片资源。

渲染预览

🏠
BoxFit.cover
⭐
BoxFit.contain
💎
BoxFit.fill
🎨
BoxFit.none

配置本地图片

// 1. 在 pubspec.yaml 中配置
// flutter:
//   assets:
//     - assets/images/

// 2. 使用 Image.asset
Image.asset(
  'assets/images/logo.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

常用属性

属性 类型 说明
assetName String 图片路径
width double? 宽度
height double? 高度
fit BoxFit? 填充方式
color Color? 颜色混合
semanticLabel String? 语义标签
💡 提示：记得在 pubspec.yaml 中配置图片资源路径。

🌐 Image.network

Image.network 用于加载网络图片。

渲染预览

🖼️
✓ 加载成功
加载中 65%
⏳ 加载中
❌
加载失败
✗ 加载失败

基本用法

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded /
                loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)

常用属性

属性 类型 说明
src String 图片 URL
headers Map? 请求头
loadingBuilder ImageLoadingBuilder 加载中构建器
errorBuilder ImageErrorWidgetBuilder 错误构建器
cacheWidth int? 缓存宽度
cacheHeight int? 缓存高度
💡 提示：使用 loadingBuilder 和 errorBuilder 可以提供更好的用户体验。

📂 Image.file

Image.file 用于加载设备文件系统中的图片。

渲染预览

/storage/emulated/0/DCIM/Camera/photo_001.jpg
📷
🖼️
🎨
📁 相机照片
📏 1920x1080
💾 2.4 MB

基本用法

import 'dart:io';

Image.file(
  File('/path/to/image.jpg'),
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)

使用场景

  • 加载用户选择的图片
  • 加载应用下载的图片
  • 加载相机拍摄的图片
💡 提示：Image.file 需要访问文件系统，需要配置相应的权限。

💾 Image.memory

Image.memory 用于从内存字节数组中加载图片。

渲染预览

Uint8List 数据：
[0xFF, 0xD8, 0x00, 0xFF, 0xE0, 0x00, 0xFF, 0xFF,
0xE8, 0x00, 0xFF, 0xFF, 0xF0, 0x00, 0xFF, 0xFF,
0xF8, 0x00, 0xFF, 0xFF, ... 2,048 bytes]
🎨
解码结果
PNG 格式
RGBA
100x100

基本用法

import 'dart:typed_data';

Uint8List imageBytes = Uint8List.fromList([/* 图片数据 */]);

Image.memory(
  imageBytes,
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

使用场景

  • 从网络下载的图片数据
  • Base64 解码后的图片
  • 动态生成的图片
💡 提示：Image.memory 适用于已经加载到内存中的图片数据。

✨ FadeInImage

FadeInImage 提供了图片加载时的渐入动画效果。

渲染预览

📷
占位图
⏳ 步骤 1: 显示占位图
🖼️
65%
✨ 步骤 2: 渐入动画
✨
✓ 步骤 3: 完全加载

基本用法

FadeInImage.assetNetwork(
  placeholder: 'assets/images/placeholder.png',
  image: 'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  fadeInDuration: Duration(milliseconds: 500),
  fadeOutDuration: Duration(milliseconds: 200),
)

// 使用内存图片作为占位符
FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://example.com/image.jpg',
)

常用属性

属性 类型 说明
placeholder String/Uint8List 占位图
image String 目标图片 URL
fadeInDuration Duration 渐入持续时间
fadeOutDuration Duration 渐出持续时间
fadeInCurve Curve 渐入曲线
💡 提示：FadeInImage 可以显著提升用户体验，特别是网络图片加载较慢时。
← 返回首页