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请求的方式非常简单,一行代码可以搞定,都不需要额外的封装了


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

查看所有标签

猜你喜欢:

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

Impractical Python Projects

Impractical Python Projects

Lee Vaughan / No Starch Press / 2018-11 / USD 29.95

Impractical Python Projects picks up where the complete beginner books leave off, expanding on existing concepts and introducing new tools that you’ll use every day. And to keep things interesting, ea......一起来看看 《Impractical Python Projects》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

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

在线XML、JSON转换工具