Flutter---框架 - 技术栈

官方给出的框架

更详细的可以分为5层

Dart 复制代码

┌─────────────────────────────────────────────────────────┐
│                   应用层 (Application)                   │
│            业务逻辑、页面路由、状态管理、网络请求          │
├─────────────────────────────────────────────────────────┤
│                   框架层 (Framework)                     │
│     Widgets / Rendering / Animation / Painting / Gestures│
├─────────────────────────────────────────────────────────┤
│                   引擎层 (Engine)                       │
│     Dart Runtime / Skia / Text / Platform Channels      │
├─────────────────────────────────────────────────────────┤
│                   嵌入层 (Embedder)                     │
│     Android / iOS / Windows / Linux / macOS / Web       │
├─────────────────────────────────────────────────────────┤
│                   操作系统层 (OS)                        │
│     Linux Kernel / Darwin / Windows NT / Browser        │
└─────────────────────────────────────────────────────────┘

Dart 复制代码

从下往上看：操作系统 → 适配层 → 引擎核心 → 界面框架 → 你的App

从上看下看：你的App → 按钮/文字（框架） → 渲染引擎 → 平台适配 → 手机系统

一.Emberdder层（平台嵌入层）

概念

Embedder是Flutter与操作系统的桥梁。它负责将Flutter引擎嵌入到特定平台的应用程序中。

核心职责

1.渲染Surface的创建和管理

2.管理消息循环（Event Loop）

3.与原生平台服务通信

4.线程管理

5.创建和管理原生窗口

核心工作流程

Dart 复制代码

// 伪代码展示Embedder工作流程
class FlutterEmbedder {
  // 1. 初始化
  void initialize() {
    // 创建原生窗口
    createNativeWindow();
    
    // 创建渲染Surface
    createRenderingSurface();
    
    // 设置消息循环
    setupMessageLoop();
    
    // 创建Flutter引擎实例
    createFlutterEngine();
  }
  
  // 2. 事件处理
  void handlePlatformEvents() {
    // 处理触摸事件
    onTouchEvent(event) {
      // 转换为Flutter事件
      flutterEvent = convertToFlutterEvent(event);
      // 发送给Engine层
      engine->sendPointerEvent(flutterEvent);
    }
    
    // 处理键盘事件
    onKeyEvent(event) { ... }
    
    // 处理生命周期事件
    onLifecycleEvent(event) { ... }
  }
  
  // 3. 渲染回调
  void onFrameRendered() {
    // Engine渲染完成后回调
    // 交换缓冲区显示
    swapBuffers();
  }
}

二.Engine层

概念

Engine层是Flutter的核心，用C++实现。它负责Flutter应用的核心功能。

Dart虚拟机

Dart 复制代码

你的Dart代码 → Dart虚拟机 → 机器能执行的指令

Skia渲染引擎

Dart 复制代码

// 当你写 Text('Hello') 时，底层发生：
1. 计算文字大小和位置
2. 创建绘制指令
3. Skia在屏幕上画画
4. 60次/秒刷新（流畅动画）

三.Framework(Flutter框架层)

Framework层完全用Dart实现，分为多个库

Dart 复制代码

┌─────────────────────────────────────────┐
│   Material/Cupertino Widgets (UI组件库) │
├─────────────────────────────────────────┤
│   Widgets (组件系统核心)                │
├─────────────────────────────────────────┤
│   Rendering (渲染层)                    │
├─────────────────────────────────────────┤
│   Animation (动画系统)                  │
├─────────────────────────────────────────┤
│   Painting (绘制库)                     │
├─────────────────────────────────────────┤
│   Foundation (基础库)                   │
└─────────────────────────────────────────┘

关键概念

三棵树概念

Dart 复制代码

Widget Tree (配置)    -> 声明式UI描述
    ↓ (createElement)
Element Tree (生命周期) -> 管理Widget实例
    ↓ (createRenderObject)
RenderObject Tree (布局绘制) -> 实际渲染

渲染管线

Dart 复制代码

1. 构建 (Build)     - 创建Widget树
2. 布局 (Layout)    - 计算大小和位置
3. 绘制 (Paint)     - 绘制命令记录
4. 合成 (Compositing) - Layer树合成
5. 光栅化 (Rasterize) - Skia转换为像素

举例：点击按钮，数字加1

1.应用层写代码

Dart 复制代码

ElevatedButton(
  onPressed: () {
    setState(() {
      count++;  // 你只写了这一行
    });
  },
  child: Text('点击'),
)

2.框架层处理

Dart 复制代码

// 框架内部发生：
1. 检测到 setState() 被调用
2. 标记需要重建Widget
3. 调用 build() 方法重新构建界面
4. 生成新的Widget树


// 框架计算每个Widget的大小位置
void performLayout() {
  // 计算Text需要多大空间
  final textSize = calculateTextSize('$count');
  
  // 计算按钮需要多大
  final buttonSize = textSize + padding;
  
  // 更新所有Widget的位置
  updatePositions();
}

3.引擎层生成绘制指令和渲染

Dart 复制代码

// 生成Skia能理解的绘制命令
void paint() {
  // 绘制按钮背景
  canvas.drawRect(rect, paint);
  
  // 绘制文字
  canvas.drawText('$count', textPosition, textPaint);
  
  // 绘制边框
  canvas.drawRRect(borderRect, borderPaint);
}


//CPU渲染 ： Skia和GPU通信
void renderToScreen() {
  // 1. 上传纹理到GPU
  glBindTexture(GL_TEXTURE_2D, textureId);
  glTexImage2D(...);
  
  // 2. GPU执行着色器程序
  glUseProgram(shaderProgram);
  
  // 3. 绘制到屏幕
  glDrawArrays(GL_TRIANGLES, 0, 6);
}

4.嵌入层显示到屏幕

Dart 复制代码

// Android端显示
void onDrawFrame() {
  // 交换缓冲区，显示新帧
  eglSwapBuffers(display, surface);
  
  // 屏幕刷新，看到新数字
}

关键点：理解这些框架怎么帮助写Flutter程序？

Dart 复制代码

实际场景1：性能优化 - 为什么我的列表卡顿？

实际场景2：为什么我的动画卡顿？

实际场景3：State管理混乱

实际场景4：自定义复杂布局

实际场景6：集成原生功能

在遇到需要理解原理的时候的问题，就需要涉及框架的知识点

学习路径建议

Dart 复制代码

第一阶段：先会用（1-2个月）

基础组件：掌握常用Widget
布局系统：理解Row、Column、Stack、Flex
状态管理：学会setState、Provider
路由导航：掌握Navigator、命名路由

第二阶段：知道原理（第3个月）

当遇到这些问题时，回头学架构：
性能问题 → 学习三棵树、Element复用
动画问题 → 学习TickerProvider、动画系统
状态混乱 → 学习InheritedWidget原理
需要自定义 → 学习RenderObject、CustomPainter

第三阶段：深入理解（遇到瓶颈时）

需要极致性能 → 学习渲染管线、图层合成
需要原生集成 → 学习Platform Channels
需要跨平台统一 → 学习Embedder层原理

写代码的思维模型

Dart 复制代码

你的代码 → Widget树配置 → Element树管理 → RenderObject树渲染

1. 我写的Widget会创建什么Element？
2. 这个Element会创建什么RenderObject？
3. 状态变化时，哪些Element会更新？
4. 哪些RenderObject会重绘？

遇见问题时的的排查

Dart 复制代码

问题现象 → 这个问题涉及Flutter架构的哪一层？ 然后去研究那一层，
- UI显示不对 → Widget/Element层
- 性能卡顿 → RenderObject/Engine层  
- 平台特性缺失 → Embedder/Channel层
- 功能异常 → 状态管理/生命周期