Flutter 架构

在本节中，我们将讨论 Flutter 框架的架构。 Flutter 架构主要由四个组件组成。

1. Flutter 引擎
2. 基础库
3. 小部件
4. 设计特定小部件

Flutter 引擎

它是一个用于高质量移动应用程序的可移植运行时，主要基于 C++ 语言。 它实现了 Flutter 核心库，包括动画和图形、文件和网络 I/O、插件架构、辅助功能支持以及用于开发、编译和运行 Flutter 应用程序的 Dart 运行时。 它采用 Google 的开源图形库 Skia 来渲染底层图形。

基础库

它包含编写 Flutter 应用程序的基本构建块所需的所有包。 这些库是用 Dart 语言编写的。

小部件

在 Flutter 中，一切都是小部件，这是该框架的核心概念。 Flutter 中的小部件本质上是一个用户界面组件，它影响和控制应用程序的视图和界面。 它表示用户界面一部分的不可变描述，包括使用小部件创建的图形、文本、形状和动画。 这些小部件类似于 React 组件。

在 Flutter 中，应用程序本身就是一个包含许多子小部件的小部件。 这意味着应用程序是顶级小部件，其 UI 是使用一个或多个子小部件构建的，这些子小部件又包括子子小部件。 此功能可帮助您非常轻松地创建复杂的用户界面。

我们可以从上一节中创建的 hello world 示例中理解它。 在这里，我们将通过以下图表解释该示例。

在上面的例子中，我们可以看到所有的组件都是包含子组件的小部件。 因此，Flutter 应用程序本身就是一个小部件。

设计特定小部件

Flutter 框架有两个小部件集，它们符合特定的设计语言。 这些是 Android 应用程序的 Material Design 和 IOS 应用程序的 Cupertino Style。

手势

它是一个小部件，它使用 GestureDetector 提供 Flutter 中的交互（如何监听和响应）。 GestureDector 是一个不可见的小部件，它包括其子小部件的点击、拖动和缩放交互。 我们还可以通过与 GestureDetector 小部件组合将其他交互功能添加到现有小部件中。

状态管理

Flutter 小部件通过使用特殊的小部件 StatefulWidget 来维护其状态。 每当其内部状态发生变化时，它总是自动重新渲染。 重新渲染通过计算旧小部件 UI 和新小部件 UI 之间的距离来优化，并且仅渲染必要的更改内容。

细胞层

层是 Flutter 框架的一个重要概念，这些层按复杂程度分为多个类别，并以自上而下的方式排列。 最顶层是应用程序的 UI，它特定于 Android 和 iOS 平台。 第二个最顶层包含所有 Flutter 本机小部件。 下一层是渲染层，它渲染 Flutter 应用程序中的所有内容。 然后，各层下降到手势、基础库、引擎，最后下降到核心平台特定代码。 下图指定了 Flutter 应用程序开发中的层。

关于 Flutter 架构的 MCQ

1. 以下哪一项不是 Flutter 架构的主要组成部分？

1. Flutter 引擎
2. 基础库
3. 虚拟 DOM
4. 小部件

2. Flutter 引擎中使用的主要编程语言是什么？

1. Java
2. Python
3. C++
4. Swift

3. 哪个库负责 Flutter 中的动画、图形和文件 I/O？

1. 基础库
2. Flutter 引擎
3. 小部件库
4. UI 工具包

4. Flutter 中 Foundation Library 的目的是什么？

1. 提供本机 Android 和 iOS 组件
2. 实现 Dart 语言功能和基本包
3. 直接渲染 UI 元素
4. 管理应用程序状态

5. 在 Flutter 中，一切都被视为？

1. 函数
2. Widget
3. Class
4. 组件

6. Flutter 如何描述其 UI 结构？

1. 基于层的层次结构
2. 小部件树
3. 视图的扁平列表
4. 虚拟 DOM

7. Flutter 应用程序中最顶层的小部件是什么？

1. Scaffold
2. AppBar
3. 根小部件
4. MaterialApp

8. Flutter 提供的两个设计特定的小部件是什么？

1. Material Design 和 Cupertino
2. Bootstrap 和 Ant Design
3. React 和 Angular
4. iOS 和 Android 组件

9. 哪个小部件用于处理用户交互，如点击、拖动和缩放？

1. GestureDetector
2. GestureHandler
3. InteractiveWidget
4. InputListener

10. Flutter 中哪种类型的小部件维护其状态？

1. StatelessWidget
2. StatefulWidget
3. DynamicWidget
4. InteractiveWidget

11. Flutter 中的渲染层做什么？

1. 仅管理动画
2. 处理手势检测
3. 将小部件转换为屏幕上的像素
4. 实现 Dart 运行时

12. Skia 图形库在 Flutter 中的主要功能是什么？

1. 处理网络请求
2. 管理设备存储
3. 渲染底层图形
4. 控制状态管理

13. 在 Flutter 中，核心平台特定代码层扮演什么角色？

1. 提供特定于设备的功能，如摄像头和位置
2. 将 Dart 代码转换为机器代码
3. 管理应用程序导航
4. 处理 HTTP 请求

14. Flutter 架构中层的目的是什么？

1. 分离关注点并组织应用程序结构
2. 优化数据库查询
3. 提高调试能力
4. 存储全局变量

15. 使用 Flutter 基于小部件的方法的主要优势是什么？

1. 它支持灵活且可重用的 UI 结构
2. 它显着减小了应用程序的大小
3. 它允许直接操作像素
4. 它消除了编码的需要

16. Material Design 和 Cupertino 被归类为哪种类型的小部件？

1. 系统小部件
2. 设计特定的小部件
3. 交互式小部件
4. 布局小部件

17. 关于 Flutter 的以下哪个陈述是正确的？

1. Flutter 使用 Java 进行 UI 渲染
2. Flutter 应用程序在 Java 虚拟机 (JVM) 上运行
3. Flutter 应用程序对 Android 和 iOS 使用单个代码库
4. Flutter 使用 XML 进行 UI 设计

18. Flutter 如何优化 UI 元素的重新渲染？

1. 通过使用 Virtual DOM
2. 通过重新编译整个应用程序
3. 通过仅更新已更改的元素
4. 通过永久缓存 UI 元素

19. 以下哪一项不是 Flutter 引擎的功能？

1. 处理动画和图形
2. 管理数据库连接
3. 提供插件架构
4. 运行 Dart 运行时

20. 是什么让 Flutter 与其他移动框架不同？

1. 使用基于小部件的 UI 而不是本机 UI 组件
2. 需要 Android 和 iOS 的单独代码库
3. 使用 HTML 和 CSS 进行 UI 渲染
4. 使用 JavaScript 作为其主要语言