一、准备工作添加游戏逻辑文件在正式开始写 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 想象成一张打印好的卡片——上面的内容在打印时就定了不会再变。三、创建你的第一个自定义 Widget3.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, // 默认 → 白色 }, ),这段代码的逻辑很直观如果猜对了就显示绿色位置不对就显示黄色猜错了就显示灰色其他情况显示白色。六、添加文字内容最后一步在方块中间显示字母。这里用到两个我们已经认识的 WidgetCenter居中和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 和 BoxDecorationContainer 是万能盒子用来设置大小、内边距等。BoxDecoration 是它的化妆师负责添加边框、背景色、阴影等视觉装饰。child 和 childrenFlutter 中组件的嵌套通过 child单个子组件或 children多个子组件属性实现这是构建 Widget 树的基本方式。九、下一步学习现在你已经学会了创建自定义 Widget下一课将进入布局Layout章节学习如何用Column、Row等布局组件把多个 Tile 排列成游戏需要的网格。猜词游戏的界面正在一步步成型我们下篇文章见参考资料Flutter 官方教程 - Widget Fundamentals