Flutter - 架构应用

本章我们来讨论Flutter框架的架构。

小部件

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

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

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

你好世界应用程序

这里值得注意的是以下几点 -

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

  • MaterialApp有一个 home 属性来指定主页的用户界面，这又是一个用户创建的小部件MyHomePage。

  • MyHomePage是使用另一个 flutter 原生小部件Scaffold构建的

  • Scaffold有两个属性——body和appBar

  • body用于指定其主用户界面，appBar用于指定其 header 用户界面

  • 标题 UI是使用 flutter 原生小部件构建的，AppBar和正文 UI是使用中心小部件构建的。

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

手势

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

国家概念

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

层数

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

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

图层概述

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

  • 在 Flutter 中，一切都是一个 widget，一个复杂的 widget 是由已经存在的 widget 组成的。

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

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

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

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