每日一题 Flutter#5,6 | 两道 Widget 选择题

第5题 第6题

最近在着手开发我的 《匠心星问》 ,它定位是一款 题库 应用,将集题目浏览、发布、解答、做题为一体。打算第一步先以 Flutter 为核心,准备题库资源。于是诞生《每日一题》 系列,准备精心设计一些 Flutter 的问题与解答,作为题库的养料。周末准备了两道选择题, 一起来看看吧:

第5题 第6题

第5题: Widget 对象创建

今天是一道比较简单 单选题:

关于 Widget 对象的创建时机,以下说法正确的是?

  • A. Widget 对象会在界面绘制时被创建,并作为绘制参数。
  • B. Widget 对象在每次 build 构建过程中都会被重新创建 。
  • C. Widget 一旦创建就会一直存在,直到应用关闭。
  • D. Widget 对象的创建由 Flutter 引擎自动管理,开发者无法手动创建。

这是一道考查 Flutter 中 Widget 对象创建时机 的理解题。下面我们逐项分析选项,并结合 Flutter 的运行机制进行详解。

1.理解 Flutter 中 Widget 的工作机制

Flutter 中的 UI 是由一颗 Widget 树构成的,核心原则是:Widget 是不可变的(immutable),构建时临时创建并用于描述界面结构。

当调用 build() 方法时:

  • Flutter 会根据状态(State)构建一个新的 Widget 树;
  • 新的 Widget 会与旧的 Widget 对比,计算差异(diff);
  • 最终将差异应用到底层的 Element 树与 RenderObject 树中,达到更新 UI 的目的。

2.逐项分析选项

A. ❌ Widget 对象会在界面绘制时被创建,并作为绘制参数。
  • 错误原因

    • Flutter 中的绘制是由 RenderObject 完成的。
    • Widget 本身并不参与绘制,它只是 UI 的配置说明
    • Widget 在 build() 过程中创建,早于实际的绘制阶段
    • 绘制阶段由 RenderObject.paint() 等完成,使用的是 Render 树。

✅ 更准确的说法是:Widget 是"构建"而不是"绘制"时创建的。


B. ✅ Widget 对象在每次 build 构建过程中都会被重新创建。
  • 正确原因

    • 每次调用 build() 方法(如 setState() 或父组件变化),都会重新构建 Widget 树。
    • 所以 Widget 是临时对象,每次 build 都会重新创建新的 Widget 实例

这正是 Flutter 高性能的关键 ------ 利用轻量级的 Widget 描述 UI,避免复杂状态同步。


C. ❌ Widget 一旦创建就会一直存在,直到应用关闭。

错误原因

  • Widget 是短生命周期的临时对象。
  • 它们会在每次构建中重新创建,并很快被垃圾回收。
  • State (对于 StatefulWidget)和 Element 才是有持续生命周期的部分。

D. ❌ Widget 对象的创建由 Flutter 引擎自动管理,开发者无法手动创建。

错误原因

  • Widget 是开发者主动创建的(通过代码构造)。
dart 复制代码
@override
Widget build(BuildContext context) {
  return Text('Hello'); // 手动创建 Widget
}
  • 开发者可以明确控制 Widget 的结构、组合和层级。
  • Flutter 引擎只负责管理 Widget 与 Element/RenderObject 的关系和更新。

3.总结

选项 正确性 解析
A Widget 不是在绘制时创建,而是在 build 阶段。
B Widget 是构建过程的临时对象,每次 build 都会新建。
C Widget 生命周期很短,常常被 GC 回收。
D Widget 是由开发者手动创建的,不是引擎自动生成。

第6题: StatelessWidget 和 StatefulWidget 区别

今天是一道稍难的 多选题,围绕 StatelessWidget 和 StatefulWidget :

关于 StatelessWidget 和 StatefulWidget,以下说法正确的是:

  • A. 两者都通过自定义组件类中的 build 方法完成组件构建逻辑。
  • B. 在框架层,两者创建的 Element 对象,都同属于 ComponentElement 一族。
  • C. 两者都可以基于任何已存在的组件,封装得到可复用的新组件。
  • D. StatefulWidget 状态类的每次 setState 都会触发 build 方法重新构建 UI。

这是一道考查 Flutter 中,对 StatelessWidget 和 StatefulWidget 理解的选择题。下面我们逐项分析选项,并结合 Flutter 的运行机制进行详解。

A. ❌ 两者都通过自身类中的 build 方法完成组件构建逻辑。

一眼看上去好像没什么问题,但仔细分析可以看出: 组件类中的 build 方法 描述是不对的。 StatelessWidget 确实通过首先 build 方法完成组件构建任务。

但是 StatefulWidget 是将构建任务委托给 State 类做的,所以由于 build 方法的是 State 类,而非组件类。

这个选项主要考察答题者,是否能认清 StatefulWidget 和 State 之间的关系,将两者混为一谈,在该选项中就会很容易出错。

✅ 更准确的说法是:StatelessWidget 通过 build 方法、StatefulWidget 通过其对应状态类的 build 方法, 完成组件构建逻辑。


B. ✅ 在框架层,两者创建的 Element 对象,都同属于 ComponentElement 一族。

这个选项考察答题者对 Flutter 框架层 Widget 与 Element 的关系,属于较难的选项。从源码来看:

StatelessWidget 会通过 createElememt 方法创建 StatelessElement 对象。

StatefulWidget 会通过 createElememt 方法创建 StatefulElement 对象。

而在派生关系中,这两者都继承自 ComponentElement 父类。属于组合型的元素,使用本选项正确。

通过该选项,也希望让答题者稍微了解一下框架层基础知识,理解 StatelessWidget 和 StatefulElement 本质上存在一定的相似性。


C. ✅ 两者都可以基于任何已存在的组件,封装得到可复用的新组件。

这是 Flutter 的 组合优于继承 设计哲学的体现:

  • 无论是 StatelessWidget 还是 StatefulWidget,都可以作为 封装组件的外壳
  • 你可以将已有组件嵌入在新的组件中,加入布局、逻辑、样式等,形成可复用组件单元。

该选项旨在引导开发者理解 Flutter 的核心价值------以 Widget 为单位,通过组合不断封装和复用,让 UI 构建变得灵活、高效且优雅。这是区别 Flutter 与传统 UI 框架(如 Android 原生)的重要特性之一。


D. ❌ StatefulWidget 状态类的每次 setState 都会触发 build 方法重新构建 UI。

这个选项的错误可能会出乎很多人的意料。严格来说,当触发 State 的 setState 方法时,会在下一帧触发 build 方法重新构建 UI。并非 每次 都会,比如连续触发几万次 setState,并不会触发几万帧的的渲染。

《Flutter极限测试 - 连续 setState 1000000 次会怎么样?》 视频中详细介绍了 setState 中的处理逻辑。setState 只是将状态类持有的元素标脏,并触发下一帧的调度。如果以及被标脏,会直接返回,连续调用不会触发多次重新构建:

这个选项,目的在于打破「表面认知」------ 揭示 setState 的底层行为。让答题者理解:

Flutter 的响应式更新是有调度节奏的,不是立即同步的,而是「等到下一帧统一处理」。


三、总结

这道题比较综合,其中两个选项涉及到了源码层面的知识。答题错了没关系,只要对 Flutter 又多了一丢丢认知,都是你实打实的收获 ~

选项 正确性 解析
A SatefulWidget 通过其对应状态类的 build 方法, 完成组件构建逻辑;而非组件本身
B StatelessWidget 创建的 StatelessElement 和 StatefulWidget 创建的 StatfulElement, 都继承自 ComponentElement
C 以 Widget 为单位,通过组合不断封装和复用,让 UI 构建变得灵活、高效且优雅。
D State 的 setState 方法触发,会在下一帧触发 build 方法重新构建 UI,并非 每次 都会

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

相关推荐
恋猫de小郭1 小时前
Flutter 发布官方 Skills ,Flutter 在 AI 领域再添一助力
android·前端·flutter
Kapaseker6 小时前
一杯美式搞懂 Any、Unit、Nothing
android·kotlin
黄林晴6 小时前
你的 Android App 还没接 AI?Gemini API 接入全攻略
android
恋猫de小郭16 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
冬奇Lab17 小时前
PowerManagerService(上):电源状态与WakeLock管理
android·源码阅读
明君8799721 小时前
Flutter 如何给图片添加多行文字水印
前端·flutter
BoomHe1 天前
Now in Android 架构模式全面分析
android·android jetpack
四眼肥鱼1 天前
flutter 利用flutter_libserialport 实现SQ800 串口通信
前端·flutter
二流小码农1 天前
鸿蒙开发:上传一张参考图片便可实现页面功能
android·ios·harmonyos
鹏程十八少1 天前
4.Android 30分钟手写一个简单版shadow, 从零理解shadow插件化零反射插件化原理
android·前端·面试