Flutter基础（前端教程⑨-图片）

0wioiw02025-07-10 19:45

一、显示网络图片（最常用）

Dart 复制代码

Image.network(
  'https://picsum.photos/200/300', // 示例图片 URL
  width: 200,
  height: 300,
  fit: BoxFit.cover, // 图片填充方式
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator( // 加载中的进度指示器
      value: loadingProgress.expectedTotalBytes != null
          ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
          : null,
    );
  },
  errorBuilder: (context, error, stackTrace) {
    return const Icon(Icons.error); // 加载失败时显示的图标
  },
)

二、显示本地图片

1. 准备工作：配置 pubspec.yaml

首先需要在 pubspec.yaml 中声明图片资源：

Dart 复制代码

flutter:
  assets:
    - assets/images/avatar.png      # 单张图片
    - assets/images/backgrounds/    # 整个目录下的图片

2. 使用 Image.asset 显示图片

Dart 复制代码

Image.asset(
  'assets/images/avatar.png', // 图片路径（与 pubspec.yaml 中声明的一致）
  width: 100,
  height: 100,
  fit: BoxFit.contain,
)