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

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

说说组件 build 函数的作用

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

- -

1. StatelessWidget 中的 build 函数

自定义 StatelessWidgetStatefulWidget 时,我们都会面对一个需要覆写的函数: 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 中贮存的数据,如 ThemeMediaQueryNavigator 等。

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


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

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


6.本题小结

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

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

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

相关推荐
Greenland_1212 分钟前
Android 编译报错 Null extracted folder for artifact: xxx activity:1.8.0
android
cui_hao_nan44 分钟前
面试刷题平台项目总结
面试
ZhuYuxi3331 小时前
【Kotlin】const 修饰的编译期常量
android·开发语言·kotlin
Bryce李小白1 小时前
Kotlin 实现 MVVM 架构设计总结
android·开发语言·kotlin
Kiri霧1 小时前
Kotlin位运算
android·开发语言·kotlin
xjdkxnhcoskxbco1 小时前
kotlin基础【3】
android·开发语言·kotlin
thginWalker2 小时前
MySQL图解索引篇
android·mysql·adb
小趴菜82272 小时前
自定义View和动画学习记录 抓娃娃机View
android·kotlin·动画·自定义view