Flutter---flutter框架

官方给出的框架更详细的可以分为5层┌─────────────────────────────────────────────────────────┐ │ 应用层 (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 │ └─────────────────────────────────────────────────────────┘从下往上看操作系统 → 适配层 → 引擎核心 → 界面框架 → 你的App 从上看下看你的App → 按钮/文字框架 → 渲染引擎 → 平台适配 → 手机系统一.Emberdder层平台嵌入层概念Embedder是Flutter与操作系统的桥梁。它负责将Flutter引擎嵌入到特定平台的应用程序中。核心职责1.渲染Surface的创建和管理2.管理消息循环Event Loop3.与原生平台服务通信4.线程管理5.创建和管理原生窗口核心工作流程// 伪代码展示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虚拟机 → 机器能执行的指令Skia渲染引擎// 当你写 Text(Hello) 时底层发生 1. 计算文字大小和位置 2. 创建绘制指令 3. Skia在屏幕上画画 4. 60次/秒刷新流畅动画三.Framework(Flutter框架层)Framework层完全用Dart实现分为多个库┌─────────────────────────────────────────┐ │ Material/Cupertino Widgets (UI组件库) │ ├─────────────────────────────────────────┤ │ Widgets (组件系统核心) │ ├─────────────────────────────────────────┤ │ Rendering (渲染层) │ ├─────────────────────────────────────────┤ │ Animation (动画系统) │ ├─────────────────────────────────────────┤ │ Painting (绘制库) │ ├─────────────────────────────────────────┤ │ Foundation (基础库) │ └─────────────────────────────────────────┘关键概念三棵树概念Widget Tree (配置) - 声明式UI描述 ↓ (createElement) Element Tree (生命周期) - 管理Widget实例 ↓ (createRenderObject) RenderObject Tree (布局绘制) - 实际渲染渲染管线1. 构建 (Build) - 创建Widget树 2. 布局 (Layout) - 计算大小和位置 3. 绘制 (Paint) - 绘制命令记录 4. 合成 (Compositing) - Layer树合成 5. 光栅化 (Rasterize) - Skia转换为像素举例点击按钮数字加11.应用层写代码ElevatedButton( onPressed: () { setState(() { count; // 你只写了这一行 }); }, child: Text(点击), )2.框架层处理// 框架内部发生 1. 检测到 setState() 被调用 2. 标记需要重建Widget 3. 调用 build() 方法重新构建界面 4. 生成新的Widget树 // 框架计算每个Widget的大小位置 void performLayout() { // 计算Text需要多大空间 final textSize calculateTextSize($count); // 计算按钮需要多大 final buttonSize textSize padding; // 更新所有Widget的位置 updatePositions(); }3.引擎层生成绘制指令和渲染// 生成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.嵌入层显示到屏幕// Android端显示 void onDrawFrame() { // 交换缓冲区显示新帧 eglSwapBuffers(display, surface); // 屏幕刷新看到新数字 }关键点理解这些框架怎么帮助写Flutter程序实际场景1性能优化 - 为什么我的列表卡顿 实际场景2为什么我的动画卡顿 实际场景3State管理混乱 实际场景4自定义复杂布局 实际场景6集成原生功能 在遇到需要理解原理的时候的问题就需要涉及框架的知识点学习路径建议第一阶段先会用1-2个月 基础组件掌握常用Widget 布局系统理解Row、Column、Stack、Flex 状态管理学会setState、Provider 路由导航掌握Navigator、命名路由 第二阶段知道原理第3个月 当遇到这些问题时回头学架构 性能问题 → 学习三棵树、Element复用 动画问题 → 学习TickerProvider、动画系统 状态混乱 → 学习InheritedWidget原理 需要自定义 → 学习RenderObject、CustomPainter 第三阶段深入理解遇到瓶颈时 需要极致性能 → 学习渲染管线、图层合成 需要原生集成 → 学习Platform Channels 需要跨平台统一 → 学习Embedder层原理写代码的思维模型你的代码 → Widget树配置 → Element树管理 → RenderObject树渲染 1. 我写的Widget会创建什么Element 2. 这个Element会创建什么RenderObject 3. 状态变化时哪些Element会更新 4. 哪些RenderObject会重绘遇见问题时的的排查问题现象 → 这个问题涉及Flutter架构的哪一层 然后去研究那一层 - UI显示不对 → Widget/Element层 - 性能卡顿 → RenderObject/Engine层 - 平台特性缺失 → Embedder/Channel层 - 功能异常 → 状态管理/生命周期