Flutter学习（1）初识Flutter

• 可以访问全平台功能（摄像头、GPS等）

• 速度快、性能高，用户体验好

劣势有：

• 开发成本高，不同平台要维护不同代码。人力成本高

• 内容固定，动态化弱。新功能、Bug的Fix只能依赖发版（这点应该是所有Android/IOS原生开发的疼了）

2.混生开发

为了解决原生开发面临的问题，混生开发应运而生。混生开发最大的特点就是跨平台（跨Android、IOS），也就是说，Android和IOS可以共同使用多段代码，并且没有编译、性能上的差异。

主要分为三类：

• H5+原生（Cordova、Lonic）

在原生开发的基础上，使用例如WebView的控件来展示H5网页。这样就能动态更新App内容

通过使用H5、web技术栈来丰富应用的内容。缺点是性能不好，对于复杂用户界面或动画，WebView不堪重任

• JS+原生渲染（RN、Weex、快应用）

通过JS桥梁，响应式编程+DOM（控件）树操作形成了一套框架。RN就是该体系下的一个框架。

采用Web开发技术栈、社区庞大、开发成本相对较低，并且原生渲染，性能比H5高很多。动态化也很好。

缺点是JS和原生之间的如果频繁通信可能会导致卡顿。其次JS执行时需要JIT，执行效率和AOT代码仍有差距。最后就是渲染是依赖原生控件的，这导致在系统更新时社区控件可能会滞后。

• 自己的UI引擎+原生（Flutter）

上面两个开发，UI渲染都是使用原生App的UI。其劣势在第二点的最后已经阐述。那么有没有这么一个框架，它自带自己的UI引擎，代码状态的响应，直接交互自己的UI引擎，这样就不用再去和原生控件交流，避免了卡顿。并且动态性强、性能好。

答案是肯定的。Flutter就是这么一个框架。

2.Flutter特点

---

• 生态

用户多、社区资源丰富，文档多、Google大力推荐支持的框架。

• 开发效率

毫秒级热重载。编译速度快。

• 有跨平台的自绘引擎

即不使用WebView，也不实用操作系统的原生控件。有自己高性能渲染引擎来绘制widget。这样不仅可以保证在Android和IOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本

• 高性能

Flutter App采用Dart语言开发。

Dart在JIT模式下，速度基本与JS持平，但是Dart支持AOT，当以AOT模式运行时，JS远远追不上了。速度的提升对高帧率下的视图数据计算很有帮助。

• 快速内存分配

Flutter使用函数式流，这使得它在很大程度上依赖于低层的内存分配器。而Dart就在内存分配上给予了这个支持

• Dart是类型安全语言

3. Flutter框架结构

---

下图是Flutter的框架结构：

它分为两大层：

1. Flutter Framework

这是一个纯Dart实现的SDK，它实现了一个基础库。

• Rendering层

抽象的布局层，依赖于dart UI层

改成会构建一个UI树，当UI树有变化的时候，会计算出有变化的部分，然后更新UI树，最终将UI树会绘制到屏幕上，这个过程类似于React中的虚拟DOM。

Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外，还要进行坐标变化、绘制

• Widgets层

是Flutter提供的一套基础组件库，在基础组件库之上，Flutter还提供了Material和Cupertino两种视觉风格的组件库。

• 最底下两层

为dart ui层，对应Flutter中的dart：ui包，它是Flutter引擎暴露的低层UI库，提供动画、手势及绘制能力

2. Flutter Engine

纯C++实现的SDK，其中包括了Skia引擎、Dart运行时、文字排版引擎等等。在代码调用 dart:ui库时，最终会走到Engine层，然后实现真正的绘制逻辑

4. 环境搭建