Flutter 架构应用

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

部件

Flutter 框架的核心概念是在 Flutter 中，Everything is a widget。 小部件基本上是用于创建应用程序用户界面的用户界面组件。

在 Flutter 中，应用程序本身就是一个小部件。 该应用程序是顶级小部件，其 UI 是使用一个或多个子小部件（小部件）构建的，这些子小部件再次使用其子小部件构建。 这种可组合性功能帮助我们创建任何复杂的用户界面。

例如，hello world 应用程序（在前一章中创建）的小部件层次结构如下图所示

以下几点值得注意 -

• MyApp 是用户创建的小部件，它是使用 Flutter 原生小部件 MaterialApp 构建的。
• MaterialApp 有一个 home 属性来指定主页的用户界面，这也是一个用户创建的小部件 MyHomePage。
• MyHomePage 是使用另一个颤振原生小部件 Scaffold 构建的
• Scaffold 有两个属性——body 和 appBar
• body 用于指定其主用户界面，appBar 用于指定其标题用户界面
• Header UI 是使用 Flutter 原生小部件构建的，AppBar 和 Body UI 是使用 Center 小部件构建的。
• Center 小部件有一个属性 Child，它引用实际内容，它是使用 Text 小部件构建的

手势

Flutter 小部件通过一个特殊的小部件 GestureDetector 支持交互。 GestureDetector 是一个不可见的小部件，能够捕获用户交互，例如对其子小部件的点击、拖动等。 Flutter 的许多原生小部件通过使用 GestureDetector 来支持交互。我们还可以通过与 GestureDetector 小部件组合来将交互功能合并到现有小部件中。我们将在接下来的章节中分别学习手势。

State 概念

Flutter 小部件通过提供一个特殊的小部件 StatefulWidget 来支持状态维护。 Widget 需要派生自 StatefulWidget 小部件以支持状态维护，所有其他小部件都应派生自 StatefulWidget。 Flutter 小部件在本机中是反应式的。这与 reactjs 类似，并且 StatefulWidget 将在其内部状态发生更改时自动重新呈现。通过查找新旧小部件 UI 之间的差异并仅渲染必要的更改来优化重新渲染

图层

Flutter 框架最重要的概念是框架按照复杂度分为多个类别，并清晰地排列在复杂度递减的层次中。使用其直接的下一层层来构建层。最顶层是特定于 Android 和 iOS 的小部件。下一层有所有 Flutter 的原生小部件。下一层是渲染层，它是底层渲染器组件，用于渲染 Flutter 应用程序中的所有内容。层下到核心平台特定代码

下图指定了 Flutter 中层的一般概述

以下几点总结了 Flutter 的架构

• 在 Flutter 中，一切都是一个小部件，一个复杂的小部件是由已经存在的小部件组成的。
• 必要时可以使用 GestureDetector 小部件合并交互式功能。
• 可以随时使用 StatefulWidget 小部件维护小部件的状态。
• Flutter 提供分层设计，因此可以根据任务的复杂性对任何层进行编程。

我们将在接下来的章节中详细讨论所有这些概念。