每日一题 Flutter#4 | 说说组件 build 函数的作用

最近在着手开发我的《匠心星问》，它定位是一款题库应用，将集题目浏览、发布、解答、做题为一体。打算第一步先以 Flutter 为核心，准备题库资源。于是诞生《每日一题》系列，准备精心设计一些 Flutter 的问题与解答，作为题库的养料。本文的焦点是探讨:

说说组件 build 函数的作用

在 Flutter 中，build() 函数是 UI 构建的核心。理解它的价值，有助于把握组件的更新机制，从而优化性能和避免不必要的重绘。尤其在构建复杂界面或组件嵌套较多的场景中，合理控制 build 调用频率，是提升应用流畅度与响应速度的关键。这是每位 Flutter 开发者必须掌握的基础能力。

-	-

1. StatelessWidget 中的 build 函数

自定义 StatelessWidget 或 StatefulWidget 时，我们都会面对一个需要覆写的函数: build。从函数签名来看:

函数回调中有构建上下文 BuildContext 对象。
该函数负责返回一个 Widget 对象。

也就是说，它的作用是：构建并返回一个 Widget 树，用于描述当前组件的 UI。比如下面的 CounterView 展示：紫色的容器中放置一个文字，有一定的内边距：

dart 复制代码

class CounterView extends StatelessWidget {
  final int counter;
  final Color color;

  const CounterView({super.key, required this.counter, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.purple,
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      child: Text('Count: $counter', style: TextStyle(color: color)),
    );
  }
}

build 函数就是通过 Container、Text 组件，装配出期望的界面效果。这个展示效果就是 CounterView 组件的效果。如果有其他地方也要展示这种效果，就可以直接使用 CounterView 组件。

2. StatefulWidget 中的 build 函数

现在想要上面的 CounterView 在每次点击时，其中的数字都 +1 。这里定义 ChangeableCounter 来完成这项能力：

对于 StatefulWidget 来说，组件的构建逻辑委托费 State 类来处理。这里是 _ChangeableCounterState 负责维护组件的状态数据和构建逻辑：

dart 复制代码

class ChangeableCounter extends StatefulWidget {
  final Color color;

  const ChangeableCounter({super.key, required this.color});

  @override
  State createState() => _ChangeableCounterState();
}

如下所示， build 函数中我们可以直接使用上面的 CounterView 表示这种 UI 效果，而不是再把 CounterView#build 的中的内容再写一遍。这就是 build 的 封装能力，提升组件的可复用性。

这里 GestureDetector 负责监听事件，点击会触发 onTap ,将状态数据 _count 加一，并触发 setState 方法，重新触发这里的 build 函数，生成新的 CounterView 对象，展示新的数值：

dart 复制代码

class _ChangeableCounterState extends State<ChangeableCounter> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: plus,
      child: CounterView(counter: _count, color: widget.color),
    );
  }

  void plus() {
    setState(() => _count++);
  }
}

3. build 函数中可以访问的数据

其实 build 函数的作用非常简单，就是基于当前可以访问到的数据，用已存在的组件，拼装出期望的 UI 效果。这里有个非常容易被忽略的点: build 函数中，可以访问哪些数据?

[1]. 组件的成员数据

首先，build 函数作为 Widget 的成员，自然可以访问当前组件类中的所有成员。也就是组件构造函数中的参数。

[2]. 构建上下文 BuildContext

BuildContext 作为 build 函数回调的参数，在构建组件过程中自然也可以使用。通过 BuildContext 可以获取上层 InheritedWidget 中贮存的数据，如 Theme、MediaQuery、Navigator 等。

比如下面通过上下文，来获取主题数据中的主题色作为背景：

[3]. StatefulWidget 中的组件和状态数据

对于 StatefulWidget，build 方法在对应的状态类中。所以可以访问 State 类中的内部状态数据。另外，State 类持有 Widget 对象，通过 widget 属性可以访问组件中的成员：

6.本题小结

在 Flutter 中，build 是组件用于构建 UI 的核心函数。无论是 StatelessWidget 还是 StatefulWidget，都必须实现这个方法，用来返回一个描述界面结构的 Widget 树。使用 build 函数封装已有组件，实现特定的 UI 元件，便于拆分和复用。在 build() 函数中，我们可以访问以下几类数据：

组件构造函数中传入的属性；
上下文对象 BuildContext，可用于访问主题（Theme）、媒体信息（MediaQuery）、路由等；
对于 StatefulWidget，还可以访问内部的状态变量及 widget 实例。

如果你有其他的看法，或者有什么想要的题目、或者想提供题目和答案，都欢迎在评论区留言。更多文章和视频知识资讯，大家可以关注我的公众号、掘金和 B 站。

掘金账号：张风捷特烈
bilibli 账号：张风捷特烈
公众号：编程之王