本质

  1. 跨平台开发是为了增加业务代码的复用率，减少因为要适配多个平台带来的工作量、从而降低开发成本。

Flutter区别于其他方案的关键技术是什么？

  1. Flutter的历史背景、运行机制、并以界面渲染过程为例与你讲述其是实现原理。

Flutter的历史背景

  1. 原生开发方式体验最好，但研发效率和研发成本相对较高、而跨平台开发方式研发虽然效率高，但为了抹平多端平台差异、研发体验
  2. 和产品功能并不完美
  3. Flutter是构建Google物联网操作系统Fuchsia的SDK、主打跨平台、高保真、高性能、开发者通过Dart语言开发App、一套代码可以同时运行在iOS和Android平台，
  4. Flutter使用Native引擎渲染视图、并提供丰富的组件和接口，无疑为开发者和用户提供良好体验。

Flutter是如何运转的

  1. 与用于构建移动应用程序的其他大多数框架不同，Flutter是重写了一整套包括底层渲染逻辑和上层开发语言的完整解决方案。即高保真、也高性能、

Flutter如何完成组件渲染的呢？

  1. 计算机系统中，图像显示需要CPU、GPU和显示器一起配合完成。CPU负责数据图像数据计算。GPU负责数据图像数据渲染、显示器负责最终图像显示、
  2. CPU把计算好的、需要显示的内容交给GPU、由GPU完成渲染后放入帧缓冲区、随后视频控制器根据垂直同步信号（VSync）以每秒60次速度、从帧缓冲区读取帧数据交由
  3. 显示器完成图像显示，
  4. Flutter关注如何尽可能快的在两个硬件时钟的VSync信号之间计算并合成视图数据。然后通过Skia交给GPU渲染、UI线程使用Dart来构建视图结构数据。这些数据会
  5. 在GPU线程进行图层合成，随后交给Skia引擎加工成GPU数据，而这些数据通过OpenGL最终提供给GPU渲染。

Skia是什么？

  1. Flutter只关心如何向GPU提供视图数据、而Skia就是它向GPU提供视图数据的好帮手
  2. Skia是一款用C++开发的、性能彪悍的2D图像绘制引擎、Skia在图形转换、文字渲染、位图渲染等方面都表现卓越、并提供了开发者友好的API、
  3. 目前Skia已经是Android官方的图像渲染引擎了。Android SDK无需内嵌Skia引擎、iOS平台需要把它作为Flutter iOS的渲染引擎嵌入到Flutter 的iOS SDK中，
  4. 替代iOS闭源的Core Graphics/Core Animation/Core Text.这是iOS打包出来的包体积比Android大一些的原因。

Flutter的原理

  1. Flutter架构采用分层设计、从下到上分为三层、依次为Embedder、Engine、Framework、
  3. Embedder是操作系统适配层、实现了渲染surface设置、线程设置、以及平台插件等平台相关特性的适配。
  5. Engine层主要包含Skia、Dart和Text，实现了Flutter的渲染引擎、文字排版、事件处理、和Dart运行时等功能、Skia和Text
  6. 作为上层接口提供了调用底层渲染和排版的能力，Dart则为Flutter提供了运行时调用Dart和渲染引擎的能力。而Engine层的作用、则是将它们组合起来、从它们生成
  7. 的数据中实现视图渲染。
  9. Framework层则是一个用Dart实现的UI SDK、包含了动画、图形绘制和手势识别等功能、为了在绘制控件等固定样式的图形时提供更直观、更方便的接口、Flutter还基于
  10. 这些基础能力，根据Material和Cupertino两种视觉设计风格封装了一套UI组件库。在开发的时候，可以直接使用这些组件库。
  12. 页面中的各界面元素（Widget）以树的形式组织、即控件树、Flutter通过控件树中的每个控件创建不同类型的渲染对象。组成渲染对象对象树。而渲染对象树在Flutter
  13. 的展示过程分为四个阶段：布局、绘制、合成和渲染、

布局

  1. Flutter采用深度优先机制遍历渲染对象树。决定渲染对象中各渲染对象在屏幕上的位置和尺寸。在布局过程中。渲染对象树中的每个渲染对象都会接收父对象的布局约束
  2. 参数、决定自己的大小、然后父对象按照控件逻辑决定各个子对象的位置，完成布局过程。
  3. 为防止因子节点发生变化而导致整个控件树重新布局，Flutter加入了一个机制-布局边界（Relayout Boundary）。可以在某些节点自动或手动设置布局边界、当边界
  4. 的任何对象发生重新布局时，不会影响边界外的对象。反之亦然。

绘制

  1. 布局完成后，渲染对象树种的每个节点都有明确的尺寸和位置，Flutter会把所有的渲染对象绘制到不同的图层上，与布局过程一样、绘制过程也是深度优先遍历。先绘制
  2. 自身、在绘制子节点。
  3. Flutter提出了与布局边界对应的机制-重绘边界（Repaint Boundary）。在重绘边界内、Flutter会强制切换新的图层、这样可以避免边界内外的互相影响。避免无关
  4. 内容置于同一图层引起不必要的重绘。
  5. 重绘边界的一个典型场景是ScrollView。ScrollView滚动的时候需要刷新视图内容。从而触发内容绘制。而当滚动内容重绘时，一般情况下其他内容是不需要重绘的，
  6. 这时重绘边界就派上用场了

合成和渲染

  1. 页面复杂，因此Flutter的渲染树层级会很多，因此Flutter渲染树图层通常很多。直接渲染，会出现大量重复绘制。需要进行图层合成、所有图层根据大小、层级、透明度
  2. 规则计算出最终显示的效果。将相同图层归类合并、简化渲染树、提高渲染效率、
  3. 合并完成后，Flutter会将几何图层数据交由Skia引擎加工成二维图像数据。最终交由GPU进行渲染、完成界面的展示。

Flutter学习路线图

一、开发

1、经典Widget

  • StatelessWidget 与 StatefulWidget
  • Image
  • Text
  • RaisedButton与FlatButton
  • ListView与CustomScrollView
  • 事件响应

  • 生命周期

    2、自定义组件

  • 常见布局Widget

  • 声明式UI布局方式
  • CustomPaint

  • 主题

    3、动画

  • Animation

  • CurvedAnimation
  • AnimationController

  • Tween

    4、网络与存储

  • HTTP编程

  • 本地存储
  • 数据库

  • JSON解析

    5、高级

  • 状态管理

  • 跨组件通信
  • 国际化
  • 线程模型（异步、并发、事件循环）

  • 屏幕适配

    二、Dart基础

  • 信息表达（基础语法、类型变量）

  • 信息处理（函数、类、运算符）

  • 综合案例

    三、工程管理

  • Flutter混编（混合开发框架、导航栈管理、原生插件）

  • 工程架构（组件化、平台化）

  • 依赖管理（第三方组件管理、图片和资源管理）

    四、线上运维

  • 性能监控（FPS、内存、页面加载时长）

  • Crash监控
  • 检测与信息采集
  • 降级

  • 日志体系

    五、发布

  • iOS打包发布

  • Android打包发布

  • 持续集成

    六、测试调试

  • 自动化测试（单元测试、Widget测试、集成测试）

  • 性能调试
  • 调试方法与工具
  • Hot Reload
  • Widget Inspector
  • 编译模式（AOT、JIT）