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

Icon、Image 与资源管理

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

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

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

加入图标和图片

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

一个真实的 App 一定包含：

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

📌 没有 Icon 和 Image：

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

二、Icon：Flutter 内置图标系统

1️⃣ Icon 是什么？

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

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，就不要用图片

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

❌ 错误写法

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 将真正“可以点了” 👆