flutter与swiftUI简介与对比

本文简单介绍一下flutter简介与swiftUI对比

1、flutter简介

	随机各种技术的不断发展成熟,5G,云计算,区块链等等,应把更多的精力放在数据运算,数据处理上。各大公司考虑跨平台技术的解决方案,React Native和Weex等等,每种框架都有各自的优缺点,但目标都是一致的,就是提升应用的开发效率,降低研发成本,一套代码运行多个平台。
	
	Flutter是Google在2015年推出的移动UI框架,可快速在iOS和Android上构建高质量的原生用户界面。Flutter第一次亮相于2015年5月Dart开发者峰会上,初始名字叫做“Sky”,后更名为Flutter,Flutter使用Dart语言开发,Dart是Google于2011年推出的新的计算机编程语言。
Flutter 具有快速开发的特点,Flutter选用了Dart作为其开发语言,Dart既可以是AOT(Ahead Of Time)编译,也可以是JIT(Just In Time)编译,其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载,从而大大提升了开发效率。

1.1 Flutter 用Dart作为开发框架和widget的语言,

使用自带的高性能渲染引擎(Skia)进行自绘,渲染速度和用户体验堪比原生。
Skia是什么?
Skia是一个2D的绘图引擎库,其前身是一个向量绘图软件,Chrome和 Android均采用 Skia作为绘图引擎。Skia提供了非常友好的 API,并且在图形转换、文字渲染、位图渲染方面都提供了友好、高效的表现。Skia是跨平台的,所以可以被嵌入到 Flutter的 iOS SDK中,而不用去研究 iOS闭源的 Core Graphics / Core Animation。

1.2 Flutter内置众多精美的Material Design和Cupertino(iOS风格)小部件,开发者可快速构建精美的用户界面,以提供更好的用户体验。

1.3 Flutter热重载

“热重载” Hot Reload 通过将更新的源代码文件注入正在运行的Dart VM(虚拟机)中工作。这不仅包括添加新类,还包括向现有类添加方法和字段,以及更改现有函数。尽管有几种类型的代码更改无法热重新:
全局变量初始化器。
静态字段初始化程序。
main()应用程序的方法。
简析热重载:

  • dart语言可以同时支持JIT/AOT编译的语言
  • JIT(just in time)即时编译技术 (动态编译)
  • JIT编译器将字节码编译成本机机器代码,具体参考深入浅出 JIT 编译器
  • flutter debug模式下使用的是JIT 编译,将更新的源代码文件注入正在运行的Dart VM中,从而运行的时候实时刷新最新代码
  • AOT (Ahead Of Time) 运行前编译(静态编译),具体参考AOT编译器
  • flutter 打包时使用的是AOT编译,运行之前将代码编译为本机机器语言

1.4【架构模式】

在这里插入图片描述Flutter 官方给出的系统框架图,可以看书flutter框架分为三层,Framework层、Engine层和Embedder层。

Framework层:由Dart来实现,包含众多安卓Material风格和iOS Cupertino风格的Widgets小部件,还有渲染、动画、绘图和手势等。Framework包含日常开发所需要的大量API,普通应用开发熟悉这些API的使用基本OK了,不过很多特殊场景的控件需要自己根据实际情况进行自定义。
Framework层的源码地址:https://github.com/flutter/flutter/tree/master/packages/flutter/lib
Engine层:由C/C++实现,是Flutter的核心引擎,主要包括Skia图形引擎、Dart运行时环境Dart VM、Text文本渲染引擎等;如果想深入了解Flutter原理,建议阅读该层的源代码。源代码地址:https://github.com/flutter/engine
Embedder层:主要处理一些平台相关的操作,如渲染Surface设置、本地插件、打包、线程设置等。

1.5 运行原理

无论是iOS还是安卓都是提供了一个平台的View给Flutter层,页面内容渲染交由Flutter层自身来完成。所以其相对React Native等框架性能更好。Flutter中图形渲染流程:
在这里插入图片描述大致流程如下:

  1. GPU的Vsync信号同步到UI线程
  2. UI线程使用Dart来构建抽象的视图结构
  3. 视图结构在GPU线程中进行图层合成
  4. 合成后的视图数据提供给Skia图形引擎处理成GPU数据
  5. 数据再通过OpenGL或Vulkan提供给GPU进行渲染

2 flutter与swiftUI,声明式UI

2.1 SwiftUI

苹果WWDC 19发布了SwiftUI。一个declarative UI框架用于构建iOS, iPadOS, macOS, watchOS, tvOS下的“跨”苹果平台的应用,理论上SwiftUI的一套declarative UI代码可以在这些平台上运行。

2.2 命令式UI与声明式UI

对于iOS传统开发来讲,UI和业务分解不好的UIViewController代码很臃肿。大部分代码是在处理数据变化引起的UI变化和用户的交互等。
比如,处理登录按钮;显示一个表示处理中的转圈动画;调用后端;隐藏转圈动画;重定向到主屏幕;失败时显示弹出窗口。在这种“命令式”范例中,你可以直接更改 UI 的各个部分以响应各种事件。看起来很简单,但随着应用程序变得越来越复杂,开发者很难掌握各种事件之间的具体关系,更新 UI 时很容易就会造成意外的故障。
而声明式UI可以解决这个问题,UI分离出来,更加专注的处理逻辑与数据。

相比之下,在”声明式“的范例中用户界面被”声明“为表示它的一些数据函数。这些数据被称为状态State。随着这些状态变化,UI会自动更新。上面的例子来说:如果用户还没有登录,那就显示登录界面,如果用户已经登录就显示用户主页。如果网络繁忙则显示旋转等待动画;如果失败则显示错误。与命令式方法的不同之处在于,所有不同的状态都在一个地方统一处理,这样就能防止意外或不一致的结果。

Flutter 使人们可以使用与 SwiftUI 相同的声明式 UI 技术,并且开发的代码可以在更多的平台上运行,这些平台包括 Android、Windows、Web 和 IOT 等​。
当然在语法上Flutter确实没有SwiftUI简洁,类似”俄罗斯套娃“的child/children以及看了就烦的茫茫多的括号确实让开发者很难清晰的看出其结构。
但是觉得跨平台UI、声明式UI可以节省更多的资本,不断试错,不断去处理数据去分析数据而不是把重点放在如何画UI上也是一种趋势。

3flutter开发工具

可以 Android Studio、IntelliJ或VS Code
如何配置

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章