声明式 UI 介绍

这篇介绍描述了 Flutter 所使用的声明式 UI 和许多其他 UI 框架所使用的命令式 UI 的概念性差异

从 Win32 到 Web 再到 Android 和 iOS，框架通常使用一种命令式的编程风格来完成 UI 编程。这可能是你最熟悉的风格——手动构建一个全功能的 UI 实例，比如一个 UIView 或其他类似的内容，在随后 UI 发生变化时，使用方法或 Setter 修改它。

为了减轻开发人员的负担，无需编写如何在不同的 UI 状态之间进行切换的代码， Flutter 相反，让开发人员描述当前的 UI 状态，并将转换交给框架。

然而，这需要稍微改变下如何操作 UI 的思考方式。

思考像下面这样一个简单的例子:

在命令式风格中，你通常需要使用选择器 findViewById 或类似函数获取到 ViewB 的实例 b 和所有权，并调用相关的修改的方法（并隐式的使其失效）。例如：

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

由于 UI 真实的来源可能比实例 b 本身的存活周期更长，你可能还需要在 ViewB 的构造函数中复制此配置。

在声明式风格中，视图配置（如 Flutter 的 Widget）是不可变的，它只是轻量的「蓝图」。要改变 UI，widget 会在自身上触发重建（在 Flutter 中最常见的方法是在 StatefulWidgets 上调用 setState）并构造一个新的 Widget 子树。

// Declarative style
return ViewB(color: red, child: const ViewC());

在这里，当用户界面发生变化时，Flutter 不会修改旧的实例 b，而是构造新的 Widget 实例。框架使用 RenderObjectsRenderObjectA persistent object in the Flutter framework responsible for layout, painting, and hit testing. Learn more 在幕后管理了传统 UI 对象的许多职责（比如维护布局的状态）。 RenderObject 是一个持久且可变的对象，负责处理布局、绘制以及命中检测等繁重的工作。 RenderObject 在帧之间保持不变，而 Flutter 轻量级且不可变的 Widget 充当蓝图，通知框架在不同状态之间修改 RenderObject， Flutter 框架则处理其余部分。