本介绍文章阐述了 Flutter 所采用的声明式风格与许多其他 UI 框架所采用的命令式风格之间的概念差异。

为什么选择声明式 UI?

#

从 Win32 到 Web,再到 Android 和 iOS,各种框架通常使用命令式 UI 编程风格。这可能是您最熟悉的风格——您手动构建一个功能齐全的 UI 实体(例如 UIView 或等效物),并在 UI 更改时使用方法和设置器对其进行修改。

相比之下,为了减轻开发者为 UI 在不同状态之间进行转换而编写代码的负担,Flutter 允许开发者描述当前的 UI 状态,而将转换过程留给框架处理。

然而,这需要在使用 UI 的思维方式上略作转变。

如何在声明式框架中更改 UI

#

请看下面的简化示例

View B (contained by view A) morphs from containing two views, c1 and c2, to containing only view c3.

在命令式风格中,您通常会找到 ViewB 的所有者,使用选择器或 `findViewById` 或类似方法检索实例 `b`,然后对其进行修改(并隐式使其无效)。例如

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

您可能还需要在 ViewB 的构造函数中复制此配置,因为 UI 的真实来源可能比实例 `b` 本身存在更长时间。

在声明式风格中,视图配置(例如 Flutter 的 Widgets)是不可变的,并且只是轻量级的“蓝图”。要更改 UI,widget 会触发自身的重建(通常通过在 Flutter 的 StatefulWidget 上调用 `setState()`),并构建一个新的 Widget 子树。

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

在此,当 UI 发生变化时,Flutter 不会修改旧的实例 `b`,而是构建新的 Widget 实例。框架在幕后通过 RenderObjects 管理传统 UI 对象的许多职责(例如维护布局状态)。RenderObjects 在帧之间持续存在,Flutter 的轻量级 Widgets 告诉框架在状态之间修改 RenderObjects。其余部分由 Flutter 框架处理。