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

为什么是声明式 UI？

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

为了减轻开发者在各种UI状态之间转换的编程负担，Flutter让开发者描述当前的UI状态，并不需要关心它是如何过渡到框架。

如何在声明性框架中更改UI？

下面是一个简单的例子：

为了将上图左侧的样式改变成右侧样式，在命令式风格中，通常需要获取到ViewB的实例，然后改变其颜色，然后将其子元素移除，再添加ViewC c3
：

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

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

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

在这里，当用户界面发生变化时，Flutter 不会修改旧的实例 b，而是构造新的 widget 实例。框架使用RenderObjects 管理传统 UI 对象的职责（比如维护布局的状态）。 RenderObjects 在帧之间保持不变， Flutter 的轻量级 widget 通知框架在状态之间修改 RenderObjects， Flutter 框架则处理其余部分。