[iOS] Flutter & SwiftUI 上手体验

最近真的是荒废学业，但是程序员这个行业吧还是挺 frustrated，anyway 玩儿一玩乱七八糟的叭~~

Flutter

安装指南：https://flutter.cn/docs/get-started/install

示例dart：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

• 本示例创建了一个具有 Material Design 风格的应用， Material 是一种移动端和网页端通用的视觉设计语言， Flutter 提供了丰富的 Material 风格的 widgets。在 pubspec.yaml 文件的 flutter 部分选择加入 uses-material-design: true 会是一个明智之举，通过这个可以让您使用更多 Material 的特性，比如其预定义好的 图标 集。

• 主函数（main）使用了 (=>) 符号，这是 Dart 中单行函数或方法的简写。

• 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个 widget。在 Flutter 中，几乎所有都是 widget，包括对齐 (alignment)、填充 (padding) 和布局 (layout)。

• Scaffold 是 Material 库中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。 widget 树可以很复杂。

• 一个 widget 的主要工作是提供一个 build() 方法来描述如何根据其他较低级别的 widgets 来显示自己。

• 本示例中的 body 的 widget 树中包含了一个 Center widget， Center widget 又包含一个 Text 子 widget， Center widget 可以将其子 widget 树对齐到屏幕中心。

综上的体验来看呢：

1. Flutter 比较 material design
2. 热更新还可
3. 兼容多个平台，几乎大前端，Android / iOS / Web
4. 写法很 Web，感觉自己在写网页

---

Flutter 布局

The core of Flutter’s layout mechanism is widgets. In Flutter, almost everything is a widget—even layout models are widgets. The images, icons, and text that you see in a Flutter app are all widgets. But things you don’t see are also widgets, such as the rows, columns, and grids that arrange, constrain, and align the visible widgets. 万物皆是widget。

布局示例

Columns and rows have properties that allow you to specify how their children are aligned vertically or horizontally, and how much space the children should occupy.

关于布局的widget可以参考这个~ https://flutter.dev/docs/development/ui/widgets/layout

All layout widgets have either of the following:

• A child property if they take a single child—for example, Center or Container
• A children property if they take a list of widgets—for example, Row, Column, ListView, or Stack.

Add the Text widget to the Center widget:

Center(
  child: Text('Hello World'),
),

mainAxisAlignment 和 flex 可以调整布局方式（例如平分）以及占比~ 关于约束可以康康这个：https://flutter.dev/docs/development/ui/layout/constraints

---

SwfitUI

SwiftUI 的介绍风格就很苹果，和Flutter的网站真的是泾渭分明：https://developer.apple.com/tutorials/swiftui
，简而言之不像Flutter还得搭个环境，直接 Xcode 打开创建 proj 即可。组件之类的可以参考：https://www.jianshu.com/p/9ff2f600304a

SwiftUI也有热更新和preview，和flutter不太一样的是，它可以改preview然后代码会自动修改：

preview改代码

其实 SwiftUI 代码和 Flutter 也极其相似，毕竟都是声明式的代码，于是也不是很想再说一下具体的代码差异，顺路来聊一下声明式叭，准备之后自己搞着玩儿的时候再好好学习一下 SwiftUI，毕竟苹果官方教程的真的好看的良心。

声明式编程其实就是描述你想要的结果，不去考虑具体的实现过程，命令式就是一步一步的描述结果是怎么产生的，举个例子，如果是你想往页面加一个button，命令式就要先创建，然后setTitle、setColor，然后设置点击事件；而声明式是酱紫的：

button

只是声明了按钮的样式，然后具体的实现逻辑就交给底层实现了。所以代码量会比之前减少很多，其实声明式给我的感觉就很 flux，描述state，然后传递action，如何改变的reducer我们就可以不用管了，反正最后会帮你转到你描述的state。

---

Comparsion

Flutter 和 SwiftUI 我都是随便看了一小下，练新手都算不上的beginner，所以也很难就深层次的差异有所感悟，大概就体验说一下优缺点叭：

pros and cons	Flutter	SwiftUI
pros	跨平台，包括网页	对 iOS 支持很好，毕竟是苹果爸爸的产品
	自带Material Design	苹果风格设计
cons	安装相对麻烦	我竟然想不到什么缺点，感觉唯一比Flutter弱的就是年纪小
	需要适配Xcode的迭代

这俩比较共同的地方就是都有热更新，语法其实也差异不大，都很Web风格。

讲真如果是做 iOS，还是建议学学SwiftUI，如果担心苹果倒闭找不到工作吧，我感觉可以搞搞 flutter 玩玩，但是就体验而言，这俩给我的感觉和Android iOS的对比很像，一个比较精致，一个比较normal，苹果还是维持了一惯的逼格的。但大前端是趋势，兼容大于体验，Flutter就是牛逼在可以兼容多个平台，这一点其实已经远远厉害过SwiftUI了，毕竟苹果还没能让swift跨平台使用。