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 Framework
:纯 Dart
实现的 SDK
UI
库,提供动画、手势及绘制能力Rendering
层:构建UI
树,当UI
树有变化时,会计算出有变化的部分,然后更新UI
树,最终将UI
树绘制到屏幕上Widgets
层:基础组件库,提供了 Material
和Cupertino
(iOS
风格)两种视觉风格的组件库Flutter Engine
:纯 C++
实现的 SDK
Skia
:渲染引擎Dart:Dart
运行时Text
:文字排版引擎在Flutter
界面渲染过程分为三个阶段:布局、绘制、合成,布局和绘制在Flutter
框架中完成,合成则交由引擎负责。
添加合成图层的理由:由于直接交付给 GPU
多图层视图数据是低效率的,可能会重复绘制,所以还需要进行一步图层的合成,最后才交由引擎负责光栅化视图
Widget
树:就是我们的UI
组件树,但这个只是一种描述信息,渲染引擎是不认识的
RenderObject
树:这才是渲染引擎真的认识的,我们需要将 Widget
转化为能用来渲染视图的 Render Object
虚拟DOM解决了一个重要的矛盾:就是 DOM 操作的性能损耗与频繁进行局部 DOM 操作的矛盾
没用虚拟DOM之前:DOM会在每一次元素更新到来之时渲染一次DOM
用了虚拟DOM之后:虚拟DOM会先汇总各个元素的更新情况,通过diff
算法计算出与原来 DOM 树的差异,最后通过一次 DOM 更新解决
Flutter
之所以采用Dart
语言,其中很重要的一点就是因为Dart
同时支持JIT
和AOT
两种编译方式
JIT
的快速开发周期:Flutter
在开发阶段采用,采用JIT
模式,这样就避免了每次改动都要进行编译,实现极大的节省了开发时间;AOT
的发布包: Flutter
在发布时可以通过AOT
生成高效的ARM
代码以保证应用性能。而JavaScript
则不具有这个能力。JIT
,Just-in-time,动态(即时)编译,边运行边编译;AOT
,Ahead Of Time,指运行前编译;android
:android
平台相关代码ios
:ios
平台相关代码lib
:flutter
相关代码,我们主要编写的代码就在这个文件夹test
:用于存放测试代码pubspec.yaml
:配置文件,一般存放一些第三方的依赖。主要是用Dart
的pub
包管理工具