Flutter - 应用架构

本章探讨 Flutter 框架的基本架构概念。

Flutter 的核心原则是：一切都是 Widget。 Widget 是创建用户界面的基本构建块。它们根据当前的配置和状态描述了其视图应该是什么样子。

Flutter 应用程序本身也是 Widget。顶层应用程序 Widget 通常使用其他 Widget（子项）构建其 UI，而这些子项又会使用它们自己的子项构建 UI。这种组合方式可以通过组合更简单、可重用的 Widget 来创建任意复杂的 UI。

考虑一个基本的 ‘Hello World’ 应用程序的 Widget 树：

↳ `home:` **MyHomePage（你的自定义 Widget）：** 表示主屏幕。

  ↳ **Scaffold（Flutter 内置 Widget）：** 实现基本的 Material Design 视觉布局结构。

    ↳ `appBar:` **AppBar（Flutter 内置 Widget）：** 显示顶部的应用栏。

      ↳ `title:` **Text（Flutter 内置 Widget）：** 显示标题文本。

    ↳ `body:` **Center（Flutter 内置 Widget）：** 使其子项居中。

      ↳ `child:` **Text（Flutter 内置 Widget）：** 显示 'Hello World' 文本。

关键要点：

你的自定义 Widget（MyApp、MyHomePage）与 Flutter 的内置 Widget（MaterialApp、Scaffold、AppBar、Center、Text）无缝集成。
Widget 通过属性进行配置（例如 home、appBar、body、child、title）。
树形结构清晰地展示了 Widget 如何组合形成最终的 UI。

处理用户交互：手势

Flutter Widget 可以使用 GestureDetector 来响应用户输入（如点击、拖动、滑动等）。GestureDetector 本身是不可见的，但它包裹另一个 Widget，捕获发生在其边界内的指针事件，并调用回调函数（如 onTap、onPanUpdate）。

许多内置 Widget，如 ElevatedButton 或 InkWell，内部已经集成了手势检测。你也可以通过将任何非交互式 Widget 包裹在 GestureDetector 中来使其可交互。

状态（State）是指随时间变化并影响 UI 的任何数据。Flutter 区分以下几种状态：

瞬态状态（Ephemeral State）： 局部于单个 Widget 的状态，例如滑动条的当前值或动画的进度。通常使用 StatefulWidget 及其关联的 State 对象进行管理。
应用状态（App State）： 在 Widget 树的不同部分共享的状态，例如用户认证状态、购物车内容或应用程序设置。虽然 StatefulWidget 可以通过将数据向下传递来管理应用状态，但这会变得很麻烦。现代 Flutter 开发依赖于专门的状态管理解决方案。

当 StatefulWidget 的状态改变时（通过调用 setState()），Flutter 会智能地重建 Widget 树中必要的部分。它将新的 Widget 配置与旧的进行比较，并仅更新那些已改变的元素，从而确保高效渲染。

对于管理应用状态，流行的解决方案包括 provider、riverpod、bloc 和 getx。与手动通过 Widget 构造函数传递数据相比，这些包提供了更具可伸缩性和可维护性的方式来访问和修改共享状态。（详情请参阅状态管理章节）。

Flutter 的架构采用分层设计，提供了不同级别的抽象。高层构建在低层之上，允许开发者在适当的复杂性级别工作。

框架层 (Dart)： 大多数 Flutter 开发在此进行。
- Material/Cupertino Widget： 实现特定设计语言的高级 Widget。
- 渲染 Widget： 抽象布局 Widget，如 Row、Column、Stack。
- 渲染层（Rendering Layer）： 一个负责绘制的低层。它接收 Widget 树的描述，并使用布局、绘制和合成将其转换为屏幕上的实际像素。
- 基础层（Foundation）： 核心工具、服务（如动画、手势）。
引擎层 (C++)： 为 Flutter 的核心 API 提供低层实现。
- Skia： Google 的 2D 图形引擎，用于渲染。
- Dart 运行时（Runtime）： 执行 Dart 代码。
- 文本渲染（Text Rendering）： 处理字体渲染。
- 平台通道（Platform Channels）： 促进与平台特定代码的通信。
嵌入层（Embedder）(平台相关)： 将 Flutter 与宿主操作系统（Android、iOS、Web、桌面）集成。管理事件循环、平台表面、输入、可访问性等。

这种分层设计提供了灵活性。你可以只使用 Material/Cupertino Widget 构建整个应用，也可以深入渲染层进行自定义 UI 开发，甚至通过平台通道与引擎或平台代码交互以满足特定需求。

总而言之：

后续章节将更详细地探讨这些概念。