2. 【文档讲解】什么是声明式UI

3-3 【文档讲解】什么是声明式UI？

声明：Flutter专栏文档均来自慕课网
https://coding.imooc.com/class/321.html

什么是声明式UI

• 为什么是声明式UI？
• 如何在声明性框架中更改UI?

Flutter采用了声明性UI布局方式，为了帮助大家快熟上手，本节我们来学习什么是声明式UI，以及它和我们常用的命令式UI的异同。

为什么是声明式UI？

从Win32到Web在到Android和iOS的框架通常使用命令式的UI编程风格。 这可能是我们最熟悉的样式 - 你手动构建全功能UI实体（如UIView或等效实体），然后在UI更改时使用方法对其进行变更。

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

虽然声明式UI能帮我们减轻很多负担，但大家要将布局的思维方式要转变过来。

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

下面是个简单的例子：

avatar

为了将上图左侧样式改变成右边样式，在命令式样式中，我们通常会获取到ViewB的实例，然后改变其颜色，然后将启动的元素移除，在添加ViewC c3：

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

在声明式UI中，视图配置（例如Flutter的widget）是不可变的，并且只是轻量级的“蓝图”。 要更改UI，Widget会在自身上触发重建（最常见的是通过在Flutter中的StatefulWidgets上调用setState()）并构造一个新的Widget子树：

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

这里，Flutter构建新的Widget实例，而不是在UI更改时改变旧实例b。 该框架使用RenderObjects管理传统UI对象的许多职责（例如维护布局的状态）。 RenderObjects在帧之间保持不变，Flutter的轻量级Widgets告诉框架在状态之间改变RenderObjects，接下来Flutter框架会处理其余部分。

---