Flutter - 应用架构

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

Widget

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

在Flutter中，应用程序本身就是一个 Widget。应用程序是顶级 Widget，其 UI 使用一个或多个子 Widget（Widget）构建，这些子 Widget 又使用其子 Widget 构建。此组合性功能帮助我们创建任何复杂程度的用户界面。

例如，Hello World 应用程序（在上一章中创建）的 Widget 层次结构如下所示：

这里以下几点值得注意：

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

• MaterialApp 具有一个 home 属性来指定主页的用户界面，它又是用户创建的 Widget，MyHomePage。

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

• Scaffold 具有两个属性 – body 和 appBar

• body 用于指定其主要用户界面，appBar 用于指定其标题用户界面

• 标题 UI 使用 Flutter 原生 Widget AppBar 构建，主体 UI 使用 Center Widget 构建。

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

手势

Flutter Widget 通过一个特殊的 Widget GestureDetector 支持交互。GestureDetector 是一个不可见的 Widget，具有捕获用户交互（如点击、拖动等）其子 Widget 的能力。Flutter 的许多原生 Widget 都通过使用 GestureDetector 支持交互。我们还可以通过将现有 Widget 与 GestureDetector Widget 组合来将其整合到现有 Widget 中。我们将在以后的章节中单独学习手势。

状态的概念

Flutter Widget 通过提供一个特殊的 Widget StatefulWidget 支持状态维护。Widget 需要从 StatefulWidget Widget 派生以支持状态维护，所有其他 Widget 都应该从 StatefulWidget 派生。Flutter Widget 在原生中是反应式的。这类似于 ReactJS，并且 StatefulWidget 只要其内部状态发生变化就会自动重新渲染。通过查找旧 Widget UI 和新 Widget UI 之间的差异并仅渲染必要的更改来优化重新渲染。

层

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

Flutter 中层的总体概述如下所示：

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

• 在 Flutter 中，一切皆为 Widget，复杂的 Widget 由已存在的 Widget 组成。

• 必要时可以使用GestureDetector Widget 整合交互功能。

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

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

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