Flutter 简述(1)

Flutter 简述

简述

Flutter是Google开源的应用框架,只要一套代码兼顾Android、iOS、Web、Windows、macOS和Linux六个平台,它的设计思路可以说更加先进,不像ReactNative每个组件都需要有对应的原生组件实现,而是通过skia或者其他的渲染引擎来直接渲染画面,Flutter使用dart虚拟机来实现跨平台管理UI。

在dart上,会通过Widget构建Element,然后Element会构建RendorObject,然后RendorObject渲染的时候通过canvas来调用底层渲染引擎做最终的绘制。

直接使用渲染引擎来实现跨平台UI渲染,当需要实现复杂定制化UI时,我们依旧只需要实现一套UI,不需要在每个平台使用一个原生组件单独实现,切在性能方面也会有更好的表现,相当于节约了原生层面UI管理的工作量。

框架结构

  • dart虚拟机
    Flutter的UI是使用dart实现的,也是通过dart来实现跨平台,dart语言和kotlin比较相似,所以对于Android应用开发的同学,上手Flutter还是比较简单的。
    dart语言可以编译成各个平台的二进制程序,也可以编译成各个JS。且dart即可以支持JIT编译模式,也支持AOT编译模式。JIT编译模式可以支撑Flutter热加载,而AOT可以编译成可预期高效的程序,作为UI渲染使用更多语言,可预期是很重要的,需要稳定,否则就会出现掉帧。
  • 渲染引擎
    早期的Flutter使用的渲染引起是skia,Android之前也是使用skia来处理2D渲染。后面Flutter推出了Impeller,Impeller是Flutter推出的渲染引擎。Impeller是专门为Flutter设计的渲染引擎,支持使用OpenGL和Vulkan,优化了渲染流程以及对GPU对使用效率。

涉及内容

Flutter的架构很简单,就是使用dart来统一语言平台,然后使用渲染引擎绘制UI,所以我们主要来研究一下dart层的逻辑,学习一下Flutter是怎么实现UI的管理,包括Touch事件传递,与其他模块交互等等。

  • Flutter 启动流程
  • Flutter UI构建
  • Flutter 渲染
  • Flutter Touch事件传递
  • 。。。
相关推荐
AI_零食3 小时前
开源鸿蒙跨平台Flutter开发:研究生科研贡献雷达矩阵架构
学习·flutter·ui·华为·矩阵·开源·harmonyos
小雨天気.3 小时前
Flutter 框架跨平台鸿蒙开发 - 人生角色卡应用
flutter·华为·生活·harmonyos·鸿蒙
jwn9993 小时前
Laravel11.x新特性全解析
android·开发语言·php·laravel
程序员Ctrl喵3 小时前
Flutter 第三阶段:基础 Widget 全面指南
开发语言·javascript·flutter
我就是马云飞3 小时前
停更5年后,我为什么重新开始写技术内容了
android·前端·程序员
独特的螺狮粉4 小时前
开源鸿蒙跨平台Flutter开发:微波射频阻抗匹配系统-极坐标史密斯圆图与天线信号渲染架构
开发语言·flutter·华为·架构·开源·harmonyos
小雨天気.4 小时前
Flutter 框架跨平台鸿蒙开发 - 选择困难终结者应用
flutter·华为·生活·harmonyos·鸿蒙
stevenzqzq4 小时前
Kotlin 协程:withContext 与 async 核心区别与使用场景
android·开发语言·kotlin
唔664 小时前
原生 Android(Kotlin)仅串口「侵入式架构」完整案例三
android·架构·kotlin
唔664 小时前
原生 Android(Kotlin)仅串口「可插拔架构」完整案例一
android·架构·kotlin