Flutter - 架构应用程序

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

Widgets

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

在 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 用于指定其标题用户界面

• Header UI 使用 Flutter 原生小部件构建，AppBar 和 Body UI 使用 Center 小部件构建。

• Center 小部件有一个属性 Child，它引用实际内容，它是使用 Text 小部件构建的

手势

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

状态概念

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

层

Flutter 框架最重要的概念是，框架根据复杂性分为多个类别，并按复杂性递减的层次清晰排列。层是使用其直接的下一级层构建的。最顶层是特定于 Android 和 iOS 的 widget。下一层包含所有 flutter 原生 widget。下一层是 渲染层，它是低级渲染器组件，可渲染 flutter 应用中的所有内容。图层深入到核心平台特定代码

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

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

• 在 Flutter 中，一切都是小部件，复杂的小部件由已经存在的小部件组成。

• 可以使用 GestureDetector 小部件在必要时合并交互功能。

• 可以使用 StatefulWidget 小部件在必要时维护小部件的状态。

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

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