# SwiftUI初探

前言

---

最近公司技术战略方向调整，准备正式向swift进军。在查询oc与swift混编资料时，无意发现了一篇关于SwiftUI的文章。既然打算向swift发展，那么名字带有swift的新框架当然应该了解下啦，于是就正式挖坑了。

背景

---

2019年 WWDC 大会上，苹果宣布了基于Swift语言构建的全新UI框架-SwiftUI。其界面布局完全抛弃了Storyboard和Autolayout，采用了声明式的界面语言(DSL，即Domain Specific Language)，加上 Canvas 的实时预览功能，开发体验有了很大的提升。

网上已经有很多关于SwiftUI的介绍，这里摘录一段

wiftUI 是一种非常简单的创新方法，可以利用 Swift 的强大能力在所有苹果设备平台上构建用户界面。通过 SwiftUI，开发者仅使用一组工具和 API 就能为所有苹果设备构建用户界面。SwiftUI 使用易于阅读和编写的声明式 Swift 语法，可与新的 Xcode 设计工具无缝协作，使你的代码和设计完美同步。SwiftUI 自动支持动态类型、黑暗模式、本地化和可访问性，你的 SwiftUI 代码将成为你写过的最强大的 UI 代码。

初步看起来和xib好像没有区别，表达形式还是苹果一直以来的风格，说得“热血沸腾”。

下面是一张官方图，可以全局看看SwiftUI都支持哪些控件。

18569867-c01ceac0e21aa28b.png

目标

既然打算学习，那么就亲自上手试试。官方的教程文档是使用swiftUI实现了以下效果：

13287989-aa40e944b6fce568.gif

这里我也跟着教学步骤编写一个差不多的demo。

开始编程

创建项目

首先需要创建一个swift的工程并且选中swiftUI

创建工程.png

系统就会自动生成SwiftUI界面，左边是代码右边是时时预览功能。

时时预览.png

如果在编译的时候没有出现界面，可以点击右上角的按钮进行重新尝试。

右上角.png

页面布局

如果用oc编写gif效果的话其实很简单，就是一个tableView列表，点击跳转到一个详情页。如果使用swiftUI的话，还是先从详情页面入手会比较简单。

我们先了解下基本功能，比如修改文字样式、颜色。工程刚创建起来会有一个hello world页面，oc中的label控件就对应着SwiftUI的Text,如果要修改文字样式、颜色可以参考以下代码：

修改文字样式.png

如果有网页开发经验的话，可以发现很多字段名称都和网页一致,有点像css，这里我还尝试了下内边框，也达到了预期效果。

下面在看看常用的图片控件。这里我随便从网上下了一张图片，放到assets中，取名‘senc’。

资源图片.png

在代码中只要使用Image('name')就可以展示图片。

展示图片.png

然后我们来尝试下常用的clip，阴影，边框。
代码：

struct SwiftUIDemo: View {
    var body: some View {
//        Text(/*@START_MENU_TOKEN@*/"Hello,    World!"/*@END_MENU_TOKEN@*/)
//            .font(.title)
//            .foregroundColor(.green)
//            .padding(.leading, 8.0)
//            .padding(.top,8.0)
    
    Image("senc").clipShape(Circle())
        .overlay(Circle()
        .stroke(Color.white,lineWidth: 4))
        .shadow(radius: 10)
    }
}

效果：

切割图片.png

到这里我们可以了解到，UIKit中的常见属性都能在swiftUI看见，只是名称有所改变，因此如果需要什么效果可以根据常见属性名称去搜索。

了解了常见的控件，下面再来看看页面布局。swiftUI的页面布局抛弃了约束布局，采用了和网页很像的布局。常用的有 VStack 和HStack。比如我们希望图片和文字是上下布局，图片下有两个文字，两个文字是左右布局，那么实现的代码如下：

struct ContentView: View {
//    var titleStr :String?
    var body: some View {
        VStack(alignment: .leading) {
            Image("senc").clipShape(Circle()).overlay(Circle().stroke(Color.white,lineWidth: 4)).shadow(radius: 10).frame(width: UIScreen.main.bounds.width)
           HStack {
              Text("Joshua Tree National Park")
                  .font(.headline)
             Text("California")
                   .font(.subheadline)
           }
     }

    }
}

可以看出，显示使用VStack纵向布局，然后再使用HStack横向布局，其中还可以设置一些属性来进行调整位置，比如图片宽度、左对齐等，效果如下：

布局.png

后面还可以使用Spacer()来让连个文字控件分开到屏幕两边

spacer.png

分开到两边.png

赋值

使用UIKit编程，肯定需要给视图赋值，比如cell.titleLabel.text = @"xxx"。按照这个思路,我也想给swiftUI的控件重新赋值。我们先定义一个titleStr变量，然后Text的值根据这个titleStr变量来。

赋值.png

到这一步还是很顺利的，试图预览中图片左边的文案也不见了。但是在另外一个视图中引用这个页面，给这个页面赋值时遇到了问题。

页面报错.png

后来发现这种写法是class的写法，而SwiftUI申明的都是结构体，所以我们要用结构的构造方法传值进去。这个写法和C++很像。

正确写法.png

列表

tableView作为常见的页面结构，swiftUI自然也有对应的控件，名为list。下面我们就在创建一个列表页。它的用法也比较简单，可以参考水平布局。

列表页.png

页面跳转

navigationController的push跳转比较经典，那么在SwiftUI中是如何进行页面跳转的呢？首先我们要先增加一个NavigationView，然后给其赋值一个标题navigationBarTitle。

测试标题.png

然后我们要加点击事件了，使用NavigationLink就可以实现跳转点击。

点击跳转.png

最终效果：

最终结果.gif

总结

经过这次对SwiftUI的探索，最亮眼的应该就是Canvas的实时预览功能，这对纯代码的开发者友好不少。但是页面布局个人还是更习惯约束布局，毕竟对很多关键字不熟悉，还得花时间适应。另外,List这种模式不知道有没有复用cell，会不会造成性能问题。

SwiftUI只支持iOS13以上的系统，到普及还有一段很长的路，而且还在不断完善，很多教程中的API都无法使用了，和当初的swift很像。所以目前还是推荐学习就好，不要使用到项目中。