Flutter2.0原理解析


文章目录

  • Flutter2.0原理解析
  • 前言
  • 一、UI显示系统
  • Flutter和AndroidUI显示系统的区别（举例）
  • Android UI显示系统
  • Flutter UI显示系统
  • 二、为什么Flutter无限接近于原生
  • 一.为什么Android不是无限接近于原生（举例）
  • 二.为什么Flutter是无线接近原生
  • 为什么Flutter可以运行在多个平台中
  • 结尾


前言

因个人水平有限，对Flutter2.0的底层原理的认知不全，便于刚接触Flutter的同学理解 文章没有涉及源码的解释。

一、UI显示系统

Flutter和AndroidUI显示系统的区别（举例）

Android UI显示系统

Flutter iOS底部沉浸 flutter底层原理_flutter


几乎所有用于开发GUI程序的编程语言都会在操作系统上再封装一层，将操作系统原生API封装在一个编程框架和模型中，然后定义一种简单的开发规则来开发GUI应用系统

例如

  • AndroidSDK是封装Android操作系统API，提供了一个“UI描述文件XML + java操作DOM”的UI系统
  • IOS的UIKit对View的抽象也是一样的，他们都将操作系统API抽象成一个基础对象（如用于2D图形绘制的Canvas）然后在定义一套规则来描述UI，如UI树结构，UI操作的单线程原则等

Flutter UI显示系统

无论是Android SDK 还是IOS的UIKit，它们只是语言载体和底层的系统不同而已，哪如果存在一种UI系统，可以用同一种语言开发，然后针对不同操作系统的API接口，一个对上接口一致、对下适配不同操作系统的中间层，打包编译使用想应的中间层代码。如果能满足这些条件，那么我们就可以使用同一套代码编写跨平台的应用。
所以Flutter的原理正是如此，它提供了一套Dart API ，然后在底层通过Skia这种跨平台的绘制库（内部会调用操作系统API）实现了一套代码跨多端

Flutter iOS底部沉浸 flutter底层原理_Flutter iOS底部沉浸_02


Flutter iOS底部沉浸 flutter底层原理_ui_03

二、为什么Flutter无限接近于原生

一.为什么Android不是无限接近于原生（举例）

Flutter iOS底部沉浸 flutter底层原理_flutter_04


从流程图就可以看出 为什么Android和原生搭不上边，所以说android的UI系统是通过xml层层封装调用Skia的API来实现的

二.为什么Flutter是无线接近原生

Flutter iOS底部沉浸 flutter底层原理_Flutter iOS底部沉浸_05


Flutter iOS底部沉浸 flutter底层原理_flutter_06


Flutter通过Dart代码再用Flutter解析直接向Skia调用API，那么显而易见就相当于直接调用了Skia去完成UI的渲染，相比Android来说流程少了不止一步两步

为什么Flutter可以运行在多个平台中

是因为Skia在各个平台有各个的版本 ，不是Flutter跨平台 而是Skia跨平台Flutter只是调用的SkiaAPI接口。

结尾

祝大家乘风破浪