ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Flutter基础(前端教程⑨-图片)

2026/9/24 5:45:08 拓冰建站 浏览量
Flutter基础(前端教程⑨-图片)

一、显示网络图片(最常用)

Image.network('https://picsum.photos/200/300', // 示例图片 URLwidth: 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 中声明图片资源:

flutter:assets:- assets/images/avatar.png      # 单张图片- assets/images/backgrounds/    # 整个目录下的图片
2. 使用 Image.asset 显示图片
Image.asset('assets/images/avatar.png', // 图片路径(与 pubspec.yaml 中声明的一致)width: 100,height: 100,fit: BoxFit.contain,
)