笙亿网络策划

Flutter怎么处理图片与资源？

约 6 分钟读完 2 阅
文章导读
本节将介绍 Flutter 中图片加载、本地资源管理和网络图片处理。
📋 目录
  1. 壹 Image Widget - 图片显示
  2. 贰 实例：各种图片加载方式
  3. 叁 本地资源管理
  4. 肆 实例：使用本地资源
  5. 伍 BoxFit 图像适配
  6. 陆 CachedNetworkImage - 图片缓存
  7. 柒 实例：CachedNetworkImage
A A

Flutter 图片与资源

本节将介绍 Flutter 中图片加载、本地资源管理和网络图片处理。

Image Widget - 图片显示

实例：各种图片加载方式

// 从网络加载图片
Image.network(
  'https://example.com/image.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

// 从本地资源加载图片
Image.asset('assets/images/logo.png')

// 从本地文件加载图片
Image.file(File('path/to/image.png'))

// 带加载状态的图片
Image.network(
  'https://example.com/image.png',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded /
                loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
)

// 带错误处理的图片
Image.network(
  'https://example.com/image.png',
  errorBuilder: (context, error, stackTrace) {
    return const Icon(Icons.error, size: 50);
  },
)

本地资源管理

在 pubspec.yaml 中配置资源文件夹：

flutter:
  assets:
    - assets/images/
    - assets/data.json

实例：使用本地资源

// 使用本地图片
class AssetImageExample extends StatelessWidget {
  const AssetImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 使用 Image.asset 加载
        const Image(
          image: AssetImage('assets/images/logo.png'),
          width: 100,
        ),
        // 简写形式
        const Image.asset('assets/images/icon.png', width: 50),
        const SizedBox(height: 20),
        // 使用图片 fit
        Container(
          width: 200,
          height: 100,
          decoration: BoxDecoration(
            image: const DecorationImage(
              image: AssetImage('assets/images/bg.jpg'),
              fit: BoxFit.cover,
            ),
            border: Border.all(color: Colors.grey),
          ),
        ),
      ],
    );
  }
}

BoxFit 图像适配

值说明
fill拉伸填满（可能变形）
contain等比缩放，最大化适应
cover等比缩放，完全覆盖
fitWidth等比缩放，宽度填满
fitHeight等比缩放，高度填满
none居中显示原始尺寸
scaleDowncontain 且不超过原始尺寸

CachedNetworkImage - 图片缓存

使用 cached_network_image 包实现图片缓存。

添加依赖

dependencies:
  cached_network_image: ^3.0.0

实例：CachedNetworkImage

import 'package:cached_network_image/cached_network_image.dart';

class CachedImageExample extends StatelessWidget {
  const CachedImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: 'https://example.com/image.png',
      // 加载中显示
      placeholder: (context, url) => const CircularProgressIndicator(),
      // 错误显示
      errorWidget: (context, url, error) => const Icon(Icons.error),
      // 图片适配
      fit: BoxFit.cover,
      // 宽度高度
      width: 200,
      height: 200,
      // 圆形图片
      imageBuilder: (context, imageProvider) => CircleAvatar(
        backgroundImage: imageProvider,
      ),
    );
  }
}

对于网络图片，建议使用 CachedNetworkImage，它可以自动缓存图片，提高加载性能。