一、准备工作：添加游戏逻辑文件
在正式开始写 UI 之前，我们需要先给项目添加一个游戏逻辑文件。这个文件负责处理猜词游戏的规则判断（比如字母猜对了没有、位置对不对等），与界面无关，所以官方教程直接提供了现成的代码。
操作步骤：
- 在项目的
lib/目录下，创建一个新文件game.dart。 - 将官方提供的游戏逻辑代码复制进去（可以从官方教程页面下载）。
- 在
lib/main.dart文件顶部添加导入语句：
import 'package:flutter/material.dart';
import 'game.dart'; // 新增这一行
这个文件里定义了一些关键概念，其中最重要的是 HitType 枚举，它表示猜测结果的类型：
HitType.hit：字母和位置都猜对了（绿色）HitType.partial：字母对了但位置不对（黄色）HitType.miss：字母完全猜错了（灰色）HitType.none：还没有猜测（白色）
如果你玩过 Wordle，对这几种状态一定不陌生。
二、什么是 StatelessWidget？
在 Flutter 中，Widget 分为两大类：
- StatelessWidget（无状态组件） ：一旦创建，内容就固定不变。适合展示静态内容。
- StatefulWidget（有状态组件） ：可以根据用户操作或数据变化来更新界面。后续教程会详细讲解。
今天我们要创建的 Tile 组件就是一个 StatelessWidget。为什么？因为每个方块的内容（显示什么字母、什么颜色）在创建时就已经确定了，不需要在运行过程中自己改变。
你可以把 StatelessWidget 想象成一张打印好的卡片——上面的内容在打印时就定了，不会再变。
三、创建你的第一个自定义 Widget
3.1 定义 Tile 类
在 main.dart 文件中，MainApp 类的下方，添加以下代码：
class Tile extends StatelessWidget {
const Tile(this.letter, this.hitType, {super.key});
final String letter;
final HitType hitType;
@override
Widget build(BuildContext context) {
return Container();
}
}
别急，我们一行一行来拆解。
3.2 理解构造函数
const Tile(this.letter, this.hitType, {super.key});
这是 Tile 的构造函数。构造函数的作用是：当你要创建一个 Tile 时，告诉它需要哪些信息。
this.letter：这个方块要显示的字母，比如 "A"、"B"。this.hitType：猜测结果的类型，决定方块的颜色。{super.key}：Flutter 内部用来追踪组件的标识符，照写就行，不用深究。
打个比方：构造函数就像点菜单上的选项。你告诉服务员（Flutter）"我要一个显示字母 A 的绿色方块"，服务员就按你的要求端上来。
这就是让 Widget 可复用的关键。 同一个 Tile 类，传入不同的参数，就能显示不同的字母和颜色。
3.3 理解 build 方法
@override
Widget build(BuildContext context) {
return Container();
}
每个 Widget 都必须有一个 build 方法。它的职责很简单：告诉 Flutter 这个组件长什么样。它必须返回另一个 Widget。
现在返回的是一个空的 Container()，所以屏幕上什么都看不到。接下来我们会一步步给它"化妆"。
四、使用你的自定义 Widget
在看到效果之前，我们先把 Tile 放到界面上。修改 MainApp 的 build 方法：
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Tile('A', HitType.hit), // 使用自定义的 Tile 组件
),
),
);
}
}
这里我们创建了一个 Tile，传入字母 'A' 和猜测类型 HitType.hit（猜对了）。此时运行应用，屏幕还是空白的，因为 Tile 的 build 方法还只返回一个空容器。
五、认识 Container 组件
Container 是 Flutter 中最常用的组件之一。你可以把它理解为一个万能盒子，可以设置大小、颜色、边框、内边距等各种样式。
5.1 设置大小
先给方块一个固定的宽高：
@override
Widget build(BuildContext context) {
return Container(
width: 60,
height: 60,
);
}
这样就创建了一个 60×60 像素的方块。虽然现在还是看不见（因为没有颜色），但它在布局中已经占了位置。
5.2 添加边框：BoxDecoration
接下来用 BoxDecoration 给方块加上边框：
@override
Widget build(BuildContext context) {
return Container(
width: 60,
height: 60,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300),
),
);
}
BoxDecoration 是 Container 的"化妆师"，它可以给容器添加边框、背景色、圆角、阴影等装饰效果。这里我们用 Border.all() 给四个边都加上了浅灰色的边框。
热重载一下（按 r），你应该能看到屏幕中央出现了一个带边框的小方块。
5.3 根据猜测结果变换颜色
这是最有趣的部分。我们需要根据 hitType 的值来决定方块的背景颜色。Dart 语言提供了一种叫做 switch 表达式的语法，非常适合这种"根据不同条件返回不同值"的场景：
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300),
color: switch (hitType) {
HitType.hit => Colors.green, // 猜对了 → 绿色
HitType.partial => Colors.yellow, // 位置不对 → 黄色
HitType.miss => Colors.grey, // 猜错了 → 灰色
_ => Colors.white, // 默认 → 白色
},
),
这段代码的逻辑很直观：如果猜对了就显示绿色，位置不对就显示黄色，猜错了就显示灰色，其他情况显示白色。
六、添加文字内容
最后一步，在方块中间显示字母。这里用到两个我们已经认识的 Widget：Center（居中）和 Text（文字）。
@override
Widget build(BuildContext context) {
return Container(
width: 60,
height: 60,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300),
color: switch (hitType) {
HitType.hit => Colors.green,
HitType.partial => Colors.yellow,
HitType.miss => Colors.grey,
_ => Colors.white,
},
),
child: Center(
child: Text(
letter.toUpperCase(),
style: Theme.of(context).textTheme.titleLarge,
),
),
);
}
几个要点：
child属性：大多数 Flutter Widget 都有child（放一个子组件）或children（放多个子组件）属性。这是 Widget 嵌套的核心机制。letter.toUpperCase()：把字母转成大写显示。Theme.of(context).textTheme.titleLarge：使用应用主题中预定义的大号标题字体样式，省去手动设置字号和字重。
热重载后，你应该能看到一个绿色的方块，中间显示着大写的字母 "A"。
6.1 试着切换颜色
你可以通过修改传入 Tile 的参数来观察不同颜色的效果：
// 绿色（猜对了）
child: Tile('A', HitType.hit)
// 黄色（字母对了，位置不对）
child: Tile('A', HitType.partial)
// 灰色（完全猜错了）
child: Tile('A', HitType.miss)
每次修改后按 r 热重载，颜色会立刻切换，非常直观。
七、完整的 Widget 树
让我们回顾一下现在的 Widget 树结构：
MainApp
└── MaterialApp
└── Scaffold
└── Center
└── Tile (我们的自定义组件)
└── Container (60x60, 带边框和背景色)
└── Center
└── Text ('A')
你会发现，创建自定义 Widget 的本质就是把多个现有的 Widget 组合在一起，打包成一个新组件。这就像用乐高积木搭建：基础积木（Container、Center、Text）是 Flutter 提供的，你通过组合它们来创造属于自己的"零件"（Tile），然后再用这些零件组装出更复杂的界面。
八、本节知识点小结
StatelessWidget： 无状态组件，适合展示固定内容。通过继承 StatelessWidget 类并实现 build 方法来创建自定义组件。
构造函数传参： 通过构造函数接收外部数据（如字母和颜色类型），是让 Widget 可复用的核心方式。同一个 Widget 类传入不同参数就能呈现不同的效果。
Container 和 BoxDecoration： Container 是万能盒子，用来设置大小、内边距等。BoxDecoration 是它的"化妆师"，负责添加边框、背景色、阴影等视觉装饰。
child 和 children： Flutter 中组件的嵌套通过 child（单个子组件）或 children（多个子组件）属性实现，这是构建 Widget 树的基本方式。
九、下一步学习
现在你已经学会了创建自定义 Widget，下一课将进入布局（Layout）章节，学习如何用 Column、Row 等布局组件把多个 Tile 排列成游戏需要的网格。猜词游戏的界面正在一步步成型！
我们下篇文章见！
