SwiftUI 初体验

SophyGeoffrey 发布于9天前
0 条问题

前言

苹果在 WWDC 2019 的开幕式中给我们来带了超多的惊喜,全新的iPad OS, 给生产力和商业带来了新领域,iOS 项目可以通过简单的修改移植到 Mac OS 上,全新的 Mac Pro 高清的显示器等新硬件,但对于在苹果平台的开发者们,最重要的莫过于 Swift UI。

曾几何时,iOS 开发者的 UI 开发体验一直是大前端中体验最差的,粗矿原始的 Frame 布局系统, API 冗长难用的 Autoalyout, 都是把开发者按在地上使劲的摩擦。 毫无开发体验可言。

去年大火的 Flutter 给客户端上开发带来了全新的体验,声明式的 UI 语法,亚秒级别的实时刷新, 都极大的提升了开发效率,但现在这些都在 SwiftUI.Framework上得以实现,并且是官方原生的支持。

昨天一起观看WWDC的小伙伴们都戏称 SWiftUI真实的名字怕是 AppleFuckFlutter.framework .

作为一个苹果的死粉,当然是第一时间下载 Beta 全家桶尝鲜一下。

注:Xcode11-beta 可以安装在 Mac OS Mojave 上,但是 Preview 功能只能使用在 Mac OS Catalina 上,如果想获得完整体验最好配套升级你的 Mac。

SwiftUI 初体验

与 Flutter 的开发体验对比

准备好开发工具后我们先来对比下 SwiftUI 和 Flutter 的写法上的直观体验。

SwiftUI 初体验

SwiftUI 初体验

是不是非常相似,相似的声明式布局语法,Debug时期的Preview 和 Live Reload,但这次我们不再借助与第三方,Follow 苹果官方。下面从初次体验的方面简单聊一下直观感受。

声明式语法

下面我们看一段简单的声明式语法

SwiftUI

struct ContentView : View {
    var body: some View {
        VStack {
            MapView()
                .edgesIgnoringSafeArea(.top)
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                }
                .padding()
            
            Spacer()
            
        }
    }
}

Flutter

Widget _listItemBuilder(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 16/9,
                child: Image.network(posts[index].imageUrl, fit: BoxFit.cover),
              ),
              SizedBox(height: 16.0),
              Text(
                posts[index].title,
                style: Theme.of(context).textTheme.title
              ),
              Text(
                posts[index].author,
                style: Theme.of(context).textTheme.subhead
              ),
              SizedBox(height: 16.0),
            ],
          ),
          Positioned.fill(
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                splashColor: Colors.white.withOpacity(0.3),
                highlightColor: Colors.white.withOpacity(0.1),
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => PostShow(post: posts[index]))
                  );
                }
              ),
            ),
          ),
        ],
      ),
    );
  }

观察语法的细节,我们可以注意到一些特征,Flutter使用典型的声明式语法,开发者声明UI的布局方式,一切的布局都交给引擎来解决。在写代码层面 Dart 使用 , 来分割不同的Widget,这会造成在复杂的布局中, () 语法嵌套极其复杂,配上VSCode的插件也看的眼花缭乱。

而Swift 虽然也是声明式语法,但是仔细注意到,Swift的View组合并不是由 , 分割,而是由换行分割,在 Swift 中 函数调用是可以换行分割的。这样的 DSL 对开发者的体验更为友好,推测 SwiftUI 使用了类似标记的特征,在统一的时机去做布局。

这样可以做到非常清晰的可读性,并且代码长度也大大缩短。不信你看Xcode 终于支持 miniMap, 在 Objective-C 时代我们的显示器是没有足够空间给我们显示MiniMap的。

SwiftUI 初体验

但是 Xcode 有一点做的是不如 Flutter的 代码格式化功能非常差,不过相信这点可以通过插件弥补。

Live reload

曾几何时客户端上的开发同学有多么羡慕前端开发同学的 Live Reload,尤其是iOS平台,动辄链接5分钟,极大的影响了开发效率,这次 苹果官方 给开发者带来了此项功能。

但 One More Thing ,在Xcode 中不仅仅可以通过代码改变实时预览,还可以通过编辑预览生成代码, This is amazing.

视频地址: https:// intranetproxy.alipay.com /skylark/lark/0/2019/mp4/143223/1559636471789-84de71cc-a1a1-4eb4-810d-2a0c8a1c4799.mp4

想象一下 在业务开发后期 UED同学和你校对视觉的时候是不是可以直接编辑UI生成代码 ,而不需要重新编译。

Mix With UIKit

任何一门新技术,对于当前的技术其实都是一次冲剂,对于旧的技术 虽然经过了很多年的历史沉淀,有很多的积累,但是这些积累同时变成了包袱,如何背着包袱负重前行,是任何一门新技术都要考虑的问题,

显然Swift UI 也考虑到了,目前官方给出的文档中,SwiftUI 是可以和 UIKit 原有的体系很轻松的混合在一起。让开发者可以渐进式的接入 SwiftUI。

Older iOS Version

官方声称 SwiftUI 目前仅支持 iOS 13.x 以上,很多APP 目前还在兼容 iOS 9,看起来用上 Swift UI 还需要4年,但是观察今年 苹果的重大改变,包括,

iOS12以下 蜂窝网络下载可以大于 200M, 苹果官方包优化大小 减少50% ,iOS 13以上甚至完全不限制在蜂窝网络下下载的大小,有理由相信 苹果可以考虑把 SwiftUI 内置在 APP 包内,使开发者可以更轻易地兼容低版本的操作系统。

生态畅想

从上面中可以看到 SwiftUI 做的很多事情和 Flutter 太过相似,目前 Swift UI 支持 Apple 全平台.

但是要知道的是 安卓是开源的 iOS 是闭源生态,Flutter 把手伸到 iOS 平台不太容易,但 SwiftUI 把手伸到安卓平台可就容易多了。

SwiftUI 初体验

希望这张图有机会变成.

SwiftUI 初体验

本文作者:valiantcat

原文链接

更多技术干货敬请关注云栖社区知乎机构号: 阿里云云栖社区 - 知乎

本文为云栖社区原创内容,未经允许不得转载。

查看原文: SwiftUI 初体验

  • lazybird
  • heavyduck
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。