Flutter技术调研报告

栏目: IOS · Android · 发布时间: 5年前

内容简介: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是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技术调研报告

1.2.Flutter架构图

Flutter技术调研报告
  • Flutter Framework:纯 Dart实现的 SDK
    • 底下两层:底层UI库,提供动画、手势及绘制能力
    • Rendering层:构建UI树,当UI树有变化时,会计算出有变化的部分,然后更新UI树,最终将UI树绘制到屏幕上
    • Widgets层:基础组件库,提供了 Material 和Cupertino两种视觉风格的组件库
  • Flutter Engine:纯 C++实现的 SDK
    • Skia:渲染引擎
    • Dart:Dart运行时
    • Text:文字排版引擎

1.3.Flutter渲染机制

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

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

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

Flutter技术调研报告

2.虚拟DOM技术

Flutter技术调研报告

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

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

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

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

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

1.4.Flutter编译机制

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

  • 基于JIT的快速开发周期:Flutter在开发阶段采用,采用JIT模式,这样就避免了每次改动都要进行编译,实现极大的节省了开发时间;

  • 基于AOT的发布包: Flutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。而JavaScript则不具有这个能力。

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

1.5.Flutter项目结构

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

1.6.目前已使用Flutter的团队

  1. 美团
  2. 闲鱼
  3. 腾讯NOW直播
  4. Github等国外大厂

2.本次调研的目标

2.1.打包成aar,集成到老Android项目

已完成,集成过程基本顺利,除了一个assets里面的icudtl.dat文件,因为gradle脚本 3.0以上的bug,需要自己手动复制到app的assets目录下,其它的问题都不大。

2.2.集成grpc

已完成,Dart调用grpc请求的方式非常简单,一行代码可以搞定,都不需要额外的封装了


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

离散数学及其应用

离散数学及其应用

SusannaS.Epp / 高等教育出版社 / 2005-3-1 / 63.0

离散数学及其应用:英文本,ISBN:9787040162301,作者:( )Susanna S.Epp著一起来看看 《离散数学及其应用》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具