美文网首页FlutterFlutter
Flutter底层实现原理

Flutter底层实现原理

作者: lulu爱吃肉 | 来源:发表于2019-12-09 14:55 被阅读0次

什么是Flutter?

Flutter是谷歌出品的一个移动端框架,理论上来说Flutter的跨平台性远超传统的跨平台技术,解决方案。可以保证应用同时运行在Android,iOS,Windows,Mac,Linux,Google Fuchsia终端。
市面上已经存在各类跨平台的方案,Flutter近年来保持良好的发展势头并且广受关注的原因是什么,它本身具备那些方面的优势呢?

Flutter技术实现

Flutter整体结构图

Flutter框架结构(Framework)

Flutter框架结构图

Flutter采用Dart的框架,Dart本身包含了许多非常适合开发者使用的移动开发框架,例如常用的Material(Android风格)和Cupertino(iOS风格)框架。

  • Widget
    Widget的概念其实是Flutter开发过程中会接触到的一个比较核心的思想,Flutter官方文档中写的“Everything's a widget”,在整个开发过程中你可以把一切都看作一个组件,组件式的构建UI,响应UI
  • Rendering
    Rendering是一个界面的渲染库,在Flutter中界面的渲染主要包括三个阶段:布局(Layout),绘制(Painting),合成(Composite)
  • Animation
    Animation是一个动画相关类,可以通过这个类创建一些基础的动画,补间动画(Tween Animation),类似于Android中的ValueAnimator和iOS中的Core Animation
  • Painting
    Painting封装了来自Engine层的绘制接口(下文将会提到)
  • Gesture
    处理手势动作和手势相关交互
  • Foundation
    底层框架,定义底层工具类和方法,提供其他层使用

Flutter引擎(Engine)

Flutter引擎结构图

Flutter Engine使用C++实现,主要包括三个部分:Dart Runtime,Skia(Google开源图形库),Text(文字排版引擎)

  • Skia
    Skia是一个谷歌出品的开源二维图形库,提供常用的API,并且可以在多种软硬件平台上运行。谷歌Chrome浏览器、Chorme OS、Android、火狐浏览器、火狐操作系统及其他许多产品都使用它作为图形引擎
    和其他跨平台方案不同Flutter没有使用原生的UI 和 绘制框架,以此来保证Flutter的高性能体验

嵌入层(Embedder)

嵌入层结构图

嵌入层的主要作用顾名思义就是将Flutter嵌入到各个平台上去,其中主要负责的工作有:surface渲染设置,线程的管理,原生插件管理,事件循环的交互。嵌入层位于整个框架的最底层说明了Flutter的平台相关层非常低,大部分的渲染操作在Flutter本身内部完成,各个平台(Android,iOS等)只需要提供一个画布,这就让Flutter本身有了很好的跨端一致性。

Flutter如何做到图形性能媲美原生

不同技术方案生产app的流程

通过分析各个方案的工作流程可以更好的理解其中的原因

  • 原生Android App
    绘图时首先调用原生Java代码
    调用绘图引擎Skia的C/C++代码
    生成CPU/GPU指令完成绘图
  • Flutter App
    首先调用Dart代码
    直接调用Skia绘图引擎C/C++代码
    生成CPU/GPU指令完成绘图
  • 一般的跨平台框架(以RN为例)
    调用框架代码(JS)
    调用原生Java代码
    调用绘图引擎Skia的C/C++代码
    生成CPU/GPU指令完成绘图

由此可以看出只要Flutter框架中的Dart代码的效率可以接近原生的Java代码的时候整个Flutter App的图形绘制效率就可以媲美原生

而且在Android原生平台或者其他跨平台框架中Skia是作为操作系统的一部分,只有Android操作系统升级的时候Skia才会进行升级。但在Flutter中Skia作为了Flutter SDK的一部分,只要Flutter SDK升级Skia就会升级,所以如果Skia在最近有性能上的改进,你的Flutter App很快就可以获得性能上的改进而不是等到下一次系统升级。而Skia作为Flutter一个独立的开源绘图引擎每天都有几十个更新提交,性能不断的成倍提升,所以能够及时使用最新的Skia引擎对Flutter非常有利。


Skia绘图引擎同一场景绘制时间趋势图

相关文章

网友评论

    本文标题:Flutter底层实现原理

    本文链接:https://www.haomeiwen.com/subject/kdhbgctx.html