Flutter - 架构应用

在本章中，我们将讨论 Flutter 框架的架构。

Widgets

Flutter 框架的核心概念是 在 Flutter 中，一切皆 widget。Widgets 基本上是用于创建应用用户界面的用户界面组件。

在 Flutter 中，应用本身就是一个 widget。应用是顶层 widget，其 UI 通过一个或多个子级（widgets）构建，而这些子级又通过其子级 widgets 构建。这种 可组合性 特性帮助我们创建任意复杂度的用户界面。

例如，前一章创建的 hello world 应用的 widget 层次结构如以下图所示 −

以下几点值得注意 −

• MyApp 是用户创建的 widget，它使用 Flutter 原生 widget MaterialApp 构建。

• MaterialApp 有一个 home 属性，用于指定首页的用户界面，该界面又是用户创建的 widget MyHomePage。

• MyHomePage 使用另一个 Flutter 原生 widget Scaffold 构建。

• Scaffold 有两个属性 body 和 appBar。

• body 用于指定其主要用户界面，appBar 用于指定其头部用户界面。

• Header UI 使用 Flutter 原生 widget AppBar 构建，Body UI 使用 Center widget 构建。

• Center widget 有一个 Child 属性，它引用实际内容，并使用 Text widget 构建。

Gestures

Flutter widgets 通过一个特殊的 widget GestureDetector 支持交互。GestureDetector 是一个不可见的 widget，能够捕获其子 widget 的用户交互，如点击、拖动等。Flutter 的许多原生 widgets 通过使用 GestureDetector 支持交互。我们也可以通过将现有 widget 与 GestureDetector widget 组合来为其添加交互功能。我们将在后续章节中单独学习手势。

State 概念

Flutter widgets 通过提供一个特殊的 widget StatefulWidget 支持 状态维护。要支持状态维护，widget 需要继承自 StatefulWidget widget，其他所有 widget 也应继承自 StatefulWidget。Flutter widgets 天生是 响应式 的。这类似于 ReactJS，每当 StatefulWidget 的内部状态发生变化时，它会自动重新渲染。重新渲染通过比较新旧 widget UI 的差异并仅渲染必要的更改来优化。

Layers

Flutter 框架最重要的概念是，该框架根据复杂性分为多个类别，并清晰地排列在复杂度递减的层级中。一层使用其紧邻的下一层构建。最顶层是特定于 Android 和 iOS 的 widget 层。下一层包含所有 Flutter 原生 widgets。下一层是 Rendering layer，它是低级渲染组件，负责渲染 Flutter 应用中的所有内容。层级向下延伸到核心平台特定代码。

Flutter 中层级的总体概览如以下图所示 −

以下几点总结了 Flutter 的架构 −

• 在 Flutter 中，一切皆 widget，复杂 widget 由已存在的 widgets 组合而成。

• 必要时可以使用 GestureDetector widget 添加交互功能。

• 必要时可以使用 StatefulWidget widget 维护 widget 的状态。

• Flutter 提供分层设计，可以根据任务的复杂性编程任何层。

我们将在后续章节中详细讨论所有这些概念。