前言

最近公司技术战略方向调整，准备正式向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横向布局，其中还可以设置一些属性来进行调整位置，比如图片宽度、左对齐等，效果如下：