声明式UI简介

本篇描述了Flutter使用的声明式风格与许多其他UI框架上使用的命令式风格之间的概念差异。

为什么要声名式UI？

从Win32到Web到Android和iOSS的框架通常使用命令式的UI编程风格。这可能是您最熟悉的样式——您手动构造一个功能齐全的UI实体，例如UIView或类似的，然后在UI更改时使用方法和设置器对其进行修改。

相比之下，为了减轻开发人员必须编写如何在各种UI状态之间转换的负担，Flutter让开发人员描述当前的UI状态并将转换留给框架。

然而，这需要对你如何操作UI的思维方式稍作转变。

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

考虑下面的简化示例：

在命令式风格中，您通常会转到ViewB的所有者并使用选择器或使用findViewById或类似的方法检索实例b，并对其调用修改（并隐式使其无效哦）。例如：

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

您可能还需要在ViewB的构造函数中复制此配置，因为UI的真实来源可能比实例b本身更有效。

在声明式风格中，视图配置（例如lutter的Widgets）是不可变的，只是轻量级的"蓝图（blueprints 不知道如如何翻译😅）"。要更改UI，小部件会触发自身的重建（最常见的是在Flutter中调用StatefulWidget上的setState（））并构建一个新的小部件子树。

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

在这里，Flutter不是b在UI更改时修改旧实例，而是构造新的Widget实例。该框架使用RenderObjects在幕后管理传统UI对象的许多指责（例如维护布局状态）。RenderObject在帧之间持续存在，Flutter的轻量级Widgets告诉框架状态之间改变RenderObject.Flutter框架会处理剩下的事情。