Flutter

Flutter 简介

什么是Flutter

Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，

并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来，目前Flutter已经发布了近60个版本，并且在2018年12月初发布1.0稳定版。

在Flutter诞生之前，已经有许多跨平台UI框架的方案，比如基于WebView的Cordova、AppCan等，还有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。Flutter使用Skia作为其2D渲染引擎。

注意：Android系统内置Skia,iOS系统未内置Skia，所以ios的包会比Android更大。

Flutter架构图

• Flutter Framework
  

  ：纯

  Dart
  

  实现的

  SDK
  

  • 底下两层：底层UI库，提供动画、手势及绘制能力
  • Rendering层：构建UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上
  • Widgets层：基础组件库，提供了 Material 和Cupertino(iOS风格)两种视觉风格的组件库

• Flutter Engine
  

  ：纯

   C++
  

  实现的

  SDK
  

  • Skia:渲染引擎
  • Dart:Dart运行时
  • Text:文字排版引擎

Flutter渲染机制

1. Flutter 布局渲染的整体流程

在Flutter界面渲染过程分为三个阶段：布局、绘制、合成，布局和绘制在Flutter框架中完成，合成则交由引擎负责。

添加合成图层的理由：由于直接交付给 GPU 多图层视图数据是低效率的，可能会重复绘制，所以还需要进行一步图层的合成，最后才交由引擎负责光栅化视图

1. 虚拟DOM技术

Widget树：就是我们的UI组件树，但这个只是一种描述信息，渲染引擎是不认识的

RenderObject`树：这才是渲染引擎真的认识的，我们需要将` Widget` 转化为能用来渲染视图的` Render Object

虚拟DOM解决了一个重要的矛盾：就是 DOM 操作的性能损耗与频繁进行局部 DOM 操作的矛盾

没用虚拟DOM之前：DOM会在每一次元素更新到来之时渲染一次DOM

用了虚拟DOM之后：虚拟DOM会先汇总各个元素的更新情况，通过diff算法计算出与原来 DOM 树的差异，最后通过一次 DOM 更新解决

Flutter编译机制

Flutter之所以采用Dart语言，其中很重要的一点就是因为Dart同时支持JIT和AOT两种编译方式

• 基于JIT的快速开发周期：Flutter在开发阶段采用，采用JIT模式，这样就避免了每次改动都要进行编译，实现极大的节省了开发时间；
• 基于AOT的发布包: Flutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。而JavaScript则不具有这个能力。

1. JIT，Just-in-time,动态(即时)编译，边运行边编译;
2. AOT，Ahead Of Time，指运行前编译;

Flutter项目结构

1. android：android平台相关代码
2. ios：ios平台相关代码
3. lib：flutter相关代码，我们主要编写的代码就在这个文件夹
4. test：用于存放测试代码
5. pubspec.yaml：配置文件，一般存放一些第三方的依赖。主要是用Dart的pub包管理工具