Flutter初识

Flutter是什么？

• Flutter是一个UI SDK
• 可以进行移动端（iOS、Android）、web（beta）、桌面应用开发端“跨平台解决方案”
• 正在侵蚀iOS、Android这些原生开发

Flutter 的特点

• 美观

  • 内置 Material Design和Cupertino widget，丰富的motion API，平滑而自然的滑动效果和平台感知

• 快速

  • Flutter的UI渲染性能很好，在生产环境中将代码编译成机器码进行编译，充分利用GPU的徒刑加速能力，因此Flutter即使在低配手机上也能实现每秒60帧的UI渲染速度
  • Flutter引擎使用C++便携，包括搞笑的Skia2D渲染引擎，Dart运行时和文本渲染库

• 高效

  • HotReload，在移动端之前是一直没有的

• 开放

  • Flutter开源

帧率和刷新率的关系

• GPU/CPU的Buffer（缓存）中生成图像，屏幕从Buffer中取出图像，刷新后显示
• 理想情况下，帧率和刷新率相等，没绘制一帧，屏幕显示一帧，但实际往往不同
• 如果没有锁来控制同步，很容易出问题，但锁很容易消耗性能。

帧率和刷新率不同时，容易出现撕裂问题，如何解决这个问题？–双重缓存（Double Buffer）
出现率双重缓存和VSync

• 两个缓存区分贝为Back Buffer中写数据，屏幕从Frame Buffer 读数据
• VSync信号负责调度从Back Buffer 到Frame Buffer 的复制操作

工作流程：
1.在某个时间点：一个屏幕刷新周期完成，VSync信号产生，完成复制操作，然后通知CPU/GPU绘制下一帧图像
2.复制操作完成之后，屏幕开始下一个刷新周期，即将刚复制到的Frame Buffer的数据显示到屏幕上
3.在这种模型下，只有当VSync信号产生时，CPU/GPU才会开始i绘制

双重缓存存在的问题

• 当CPU/GPU绘制一帧的时间过长时，会产生Jank（画面停顿，甚至空白）

Flutter与RN的本质区别

• RN之类的框架，只是通过JavaScript虚拟机扩展调用系统组件，由Android和iOS系统进行组件的渲染
• Flutter是自己完成组件渲染闭环的

渲染引擎Skia

• Skia是Flutter向GPU提供数据的途径
• Skia（Skia Graphics Library(SGL)）是一个由C++编写的开源图形
• 能在低端手机呈现高质量的2D图形，最初由Skia公司开发，后被Google收购
• 应用于Android、Google Chrome、Chrome Os等等当中
• 目前Skia已经是Android的官方图像渲染引擎，因此Flutter Android SDK无需内嵌Skia引擎就可以获得天然的Skia支持
• 对于iOS平台来说，由于Skia是跨平台的，因此它作为Flutter iOS渲染引擎被潜入到Flutter的iOS SDK中，替代了iOS闭源的Core Graphics/Core Animation/Core Text，这也正是Flutter iOS SDK打包的App包体积比Android要大一些的原因

Flutter入门

搭建Flutter环境（Mac OS）

1. 下载Flutter SDKstable版本
2. 配置环境变量

可参考官方文档