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
如何配置