当前位置：首页 > news >正文

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

news 2026/3/26 23:46:37

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

在正式开始写 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），然后再用这些零件组装出更复杂的界面。