Flutter 零基础入门（二十三）：Icon、Image 与资源管理

在上一篇中，我们系统学习了：

Text 文本组件
TextStyle 样式系统
文本溢出与实战写法

从这一篇开始，我们要让页面真正"活"起来：

加入图标和图片

一、为什么 Icon 和 Image 很重要？

一个真实的 App 一定包含：

图标（返回、更多、收藏、删除）
图片（头像、封面、商品图）

📌 没有 Icon 和 Image：

页面再整齐，也像"文档"，不像 App

二、Icon：Flutter 内置图标系统

1️⃣ Icon 是什么？

Flutter 自带一套 Material Icons，开箱即用。

dart 复制代码

Icon(Icons.home)

2️⃣ 常用属性

复制代码

Icon(
  Icons.favorite,
  size: 24,
  color: Colors.red,
)

常用属性：

size：大小
color：颜色

3️⃣ Icons.xxx 从哪来？

Icons 是 Flutter 内置的图标库，例如：

Icons.home
Icons.arrow_back
Icons.add
Icons.search
Icons.person

📌 在 VS Code 中输入 Icons. 就能看到全部提示。

4️⃣ Icon 与 Text 组合（常见）

复制代码

Row(
  children: [
    Icon(Icons.location_on, size: 16),
    SizedBox(width: 4),
    Text('北京'),
  ],
)

这是非常典型的 UI 写法。

三、Image：图片组件总览

Flutter 中，图片主要分为两种来源：

1️⃣ 网络图片

2️⃣ 本地资源图片

四、Image.network：加载网络图片

1️⃣ 基本用法

复制代码

Image.network(
  'https://example.com/image.png',
)

2️⃣ 设置宽高 & 填充方式

复制代码

Image.network(
  'https://example.com/image.png',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)

常见 BoxFit：

cover（最常用，裁剪填满）
contain（完整显示）
fill（可能变形）

3️⃣ 新手常见问题

❌ 图片比例怪

❌ 图片撑爆布局

📌 解决方案：

给 Image 明确宽高 + fit

五、Image.asset：加载本地图片（重点）

1️⃣ 为什么要用本地图片？

App Logo
占位图
默认头像
UI 装饰图

2️⃣ 第一步：准备图片目录

推荐结构：

复制代码

assets/
  images/
    avatar.png
    banner.png

3️⃣ 第二步：配置 pubspec.yaml

复制代码

flutter:
  assets:
    - assets/images/

⚠️ 注意：

缩进必须正确
修改后需要 flutter pub get

4️⃣ 使用本地图片

复制代码

Image.asset(
  'assets/images/avatar.png',
  width: 80,
  height: 80,
)

六、Icon vs Image 的区别（很重要）

对比项	Icon	Image
来源	字体图标	图片文件
是否可变色	✅	❌（默认）
清晰度	无限缩放	取决于图片
适合场景	操作图标	内容展示

📌 经验法则：

能用 Icon，就不要用图片

七、图片圆角：新手必踩坑

❌ 错误写法

复制代码

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
  ),
  child: Image.asset('assets/images/avatar.png'),
)

👉 圆角不会生效！

✅ 正确写法：ClipRRect

复制代码

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.asset(
    'assets/images/avatar.png',
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  ),
)

📌 记住：图片圆角靠裁剪，不靠 Container

八、实战：一个标准头像区域

复制代码

Row(
  children: [
    ClipRRect(
      borderRadius: BorderRadius.circular(24),
      child: Image.asset(
        'assets/images/avatar.png',
        width: 48,
        height: 48,
        fit: BoxFit.cover,
      ),
    ),
    SizedBox(width: 12),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '用户名',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        Text(
          '这是用户简介',
          style: TextStyle(color: Colors.grey),
        ),
      ],
    ),
  ],
)

这是 几乎所有 App 都会用到的结构。

九、资源管理的最佳实践

📌 建议：

所有图片放 assets/images
命名使用小写 + 下划线
不要乱放根目录
一个项目只配置一次 assets 目录

十、新手常见错误总结

❌ pubspec.yaml 缩进错误

❌ 忘记 flutter pub get

❌ 图片路径拼错

❌ 用 Image 当 Icon

十一、这一篇你真正学会了什么？

你已经掌握了：

Icon 的使用方式
网络图片 & 本地图片
资源配置流程
图片圆角的正确做法

现在你的页面已经：

有图、有结构、有层次

十二、总结

本篇你学会了：

Icon 与 Image 的核心用法
Flutter 资源管理机制
常见 UI 图片布局模式

🔜 下一篇预告

《Flutter 零基础入门（二十四）：Button 按钮体系（TextButton / ElevatedButton / IconButton）》

下一篇我们将学习：

Flutter 的按钮家族
点击事件 onPressed
禁用状态
常见交互写法

从下一篇开始：

你的 App 将真正"可以点了" 👆