Flutter Widget 基础手把手教你创建自定义组件（二）

一、准备工作：添加游戏逻辑文件

在正式开始写 UI 之前，我们需要先给项目添加一个游戏逻辑文件。这个文件负责处理猜词游戏的规则判断（比如字母猜对了没有、位置对不对等），与界面无关，所以官方教程直接提供了现成的代码。

操作步骤：

在项目的 lib/ 目录下，创建一个新文件 game.dart。
将官方提供的游戏逻辑代码复制进去（可以从官方教程页面下载）。
在 lib/main.dart 文件顶部添加导入语句：

arduino 复制代码

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 想象成一张打印好的卡片------上面的内容在打印时就定了，不会再变。

3.1 定义 Tile 类

在 main.dart 文件中，MainApp 类的下方，添加以下代码：

scala 复制代码

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 理解构造函数

kotlin 复制代码

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 方法

scss 复制代码

@override
Widget build(BuildContext context) {
  return Container();
}

每个 Widget 都必须有一个 build 方法。它的职责很简单：告诉 Flutter 这个组件长什么样。它必须返回另一个 Widget。

现在返回的是一个空的 Container()，所以屏幕上什么都看不到。接下来我们会一步步给它"化妆"。

在看到效果之前，我们先把 Tile 放到界面上。修改 MainApp 的 build 方法：

scala 复制代码

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 设置大小

先给方块一个固定的宽高：

arduino 复制代码

@override
Widget build(BuildContext context) {
  return Container(
    width: 60,
    height: 60,
  );
}

这样就创建了一个 60×60 像素的方块。虽然现在还是看不见（因为没有颜色），但它在布局中已经占了位置。

5.2 添加边框：BoxDecoration

接下来用 BoxDecoration 给方块加上边框：

less 复制代码

@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 表达式的语法，非常适合这种"根据不同条件返回不同值"的场景：

dart 复制代码

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（文字）。

less 复制代码

@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 的参数来观察不同颜色的效果：

csharp 复制代码

// 绿色（猜对了）
child: Tile('A', HitType.hit)

// 黄色（字母对了，位置不对）
child: Tile('A', HitType.partial)

// 灰色（完全猜错了）
child: Tile('A', HitType.miss)

每次修改后按 r 热重载，颜色会立刻切换，非常直观。

让我们回顾一下现在的 Widget 树结构：

scss 复制代码

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 排列成游戏需要的网格。猜词游戏的界面正在一步步成型！

我们下篇文章见！

参考资料：Flutter 官方教程 - Widget Fundamentals