Swift UI 简介

苹果开发者大会 WWDC 2019 在北京时间今天凌晨开幕。在这场大会上除了「史上最难看 Mac 主机」、首次出现的iPadOS以外，我们还终于可以对饱受诟病的iTunes说再见了。而对于开发者来说，新发布的 SwiftUI 可能是最吸引人的特性，在 苹果公司软件工程高级副总裁Craig Federighi的演示中，我们可以轻松地把一百行的前端代码缩减到十几行。

学习网址：

官方swiftUI 学习

苹果官方swift 源码教程

GitHub Package 论坛

SwiftUI 的特点是什么

SwiftUI 使用声明式语法，所以我们可以简单地声明用户界面的样式。

• 开发者可以声明需要由一串文本输入框构成的组件
• 然后定义每一个输入框的字体对齐方式、字体样式、字体颜色。
• 这些代码比以往更加易懂，省时并易于维护。

这种声明式的方式甚至允许使用复杂的功能，如动画（animation）。只需要几行代码，即可添加动画在任何控件上，并且可以使用易于调用的特效。在运行时，SwifthUI 会自行控制创建流畅动作的所有步骤，并且可以解决程序冲突，保证 app 稳定运行。动画特效变得如此容易，我们可以发掘使 app 更加灵动的方式。

1. 声明式语法

SwiftUI 使用了声明式语法，所以开发者能够十分轻易地描述用户界面应该做什么。例如，编写需要包含文本字段的项目列表时，开发者可以用代码描述每个字段的对齐方式、字体和颜色。代码也比以前更简单，更易于阅读。

这种声明式风格非常适用于像动画这样复杂的元素。通过 SwiftUI，开发者可轻松地将动画添加到几乎任何控件。

2. 拥有更直观的新设计工具

Xcode 11 包含更直观的新设计工具，可让开发者通过拖拽的方式使用 SwiftUI 构建界面，在这过程中可以直接设置控件的相关属性。

当在设计工具中工作时，所编辑的内容会立刻反映到代码上，如果从模拟器切换到手机，手机也能立马看到预览效果。

3. 为所有的苹果设备提供原生体验

SwiftUI 是真正的原生 UI 框架，建立在苹果数十年打磨用户界面的经验上。开发者通过少量代码和交互式设计就能使用这个框架。

SwiftUI 代码实例

1. 为视图的任何状态声明内容和布局。SwiftUI知道该状态何时发生变化，并更新视图的呈现以匹配该状态。

代码：

List(landmarks) { landmark in
   HStack {
      Image(landmark.thumbnail)
      Text(landmark.name)
      Spacer()
      
      if landmark.isFavorite {
         Image(systemName: "star.fill")
            .foregroundColor(.yellow)
      }
   }
}

运行效果：

2. 将小的、单一职责的视图组合成更大、更复杂的接口。在为任何苹果平台设计的应用程序之间共享自定义视图。
   代码：

struct FeatureCard: View {
   var landmark: Landmark
   
   var body: some View {
      landmark.featureImage
         .resizable()
         .aspectRatio(3/2, contentMode: .fit)
         .overlay(TextOverlay(landmark))
   }
}

效果：

3. 创建平滑的动画就像添加一个方法调用一样简单。SwiftUI在需要时自动计算和动画转换。

代码：

VStack {
   Badge()
      .frame(width: 300, height: 300)
      .animation(.basic())
   Text(name)
      .font(.title)
      .animation(Animation.basic().delay(0.25))
}

效果：

正式地开始学习UI了。

起初以为UI没有代码那么复杂，不用去思考其中的逻辑与推算，应该很容易，接下来的UI课应该很轻松、很容易吧，终于可以放松一下那紧张的学习状态了。

后来才发现想的不对，UI并没有想象中的那么容易，不只是动动鼠标随便在PS上面画画而已，还要去思考，还要去想象，更多的是在学习中不断的挖掘自己的美感，对美的观察力不断地去提升。

都说万事开头难，可是刚开始学PS很容易，因为只是学了一点点基础，就是熟悉一下工具而已。即使是简单的熟悉工具，老师也教得很细致，很耐心的每个工具都使用过并且通过案例解释给我们看：这个是什么工具，它有什么作用，应该怎么操作，然后是操作出来的例子。很直观很详细，而我们要做的，就是认认真真的听老师讲，并且沉浸在其中。老师给我们上的课都很活跃，很开心，让我学的很有信心。

学了一个月的PS，从刚开始的简单临摹作业到越来越复杂的临摹作业再到让人脑瓜疼的临摹作业，让只会用几个简单工具的我变成了一个能自己设计一个网页的进阶小白。

刚开始设计网页的时候，脑袋时而一片空白，时而一片浆糊，突然不是临摹作业让人仿佛没有了跟着走的目标，只能靠自己了，靠自己硬生生走出一条路来。

没有灵感了，就不停地浏览别人的网站，想从中发现点什么为我所用，助我走上康庄大道.......经历了为时一周左右的苦思冥想，期间经历了揪头发后的脑瓜凉之后，终于想到了一个大概的框架，并且画了出来

接下来要想的是该放什么内容进去了，仿佛前面那么多天的苦思冥想、博览网页就是为了今天，灵感就像喷泉一样一下子涌进了大脑，内容填得非常快。有时候不禁感叹时间过得如此之快，内容已经填了一大半了，估算第二天上午就能全部填完，然后下午做最后的修改，这个网页就算是全部完成了。

全部完成之后的样子：

看到自己亲手设计的作品，多多少少还是挺有成就感的，说明这么久自己的努力学习没有白费。

UI课少了代码课中的枯燥乏味，多了许多代码课中没有的乐趣，这将给我接下来的学习生涯中带来了很大的帮助，对灵感有了很大的启发，发现灵感源于生活。

这段时间由于项目需要，我学习了一段时间 SwiftUI 并单独完成了一个系统的开发，耗时两个星期，主要是经常会发现自己一开始的写法不好，然后对项目进行重构…尤其是网络请求、数据加载的生命周期、状态管理等方面。。

由于我不是专门做 iOS 的，我目前只会使用 SwiftUI，UIkit 基本没用到（有时候网上搜到别人的代码有用到会加进来），在要求不高的情况下，SwiftUI 还是够用的，后续有机会可以继续学习（还有一个 iOS 项目在等我呢。。。）

现在这个项目虽然完成了（可能还有一些修修改改），但是我觉得代码上还有很多不够优雅或者非标准的解决方案，最近忙期末考试，这段时间抽空学习一些开源项目，学习一些更好的写法。。

项目预览放在博客最后（只能放出一部分界面）

技术点简单小结：

• UI 框架：SwiftUI
• 包管理：CocoaPods
• 网络请求：Alamofire
• 轻量级持久化（存储 token、id…）：UserDefaults

SwiftUI 知识点小记

以下都是我的理解进行一些简单的回想，如果描述有误可以指出

页面布局：

• VStack：纵向盒子
• HStack：横向盒子
• ZStack：垂直屏幕方向盒子
• Group：分组
• Spacer：控制盒子内布局
• GeometryReader：获取父 View 的尺寸
  获取屏幕尺寸通过 UIScreen.main.bounds.width

常用组件：

• Text：文本显示
• Button：按钮
• Picker：选择器，包含多种样式
• DatePicker：日期选择器
• Image：图片
• ProgressView：加载效果

表单相关

• List：将内容变为 iOS 表单格式
• Form：与 List 效果一样
• TextField：文本输入框
• SecureField：密码输入框
• Section：设置表单中的一些头部、尾部信息

页面跳转

• NavigationLink：页面跳转，可以设置导航标题、导航头等
• .sheet：相当于一个弹窗
• .fullScreenCover：相当于全屏的 sheet

状态管理：

• @State：管理当前 VIew 状态（一般是变量或者 struct）
• @StateObject：View 之间传递的对象
• @EnvironmentObject：整个项目所有 View 之间传递的对象
• @Binding：View 之间进行变量传递（地址传递）
• @Environment：从当前环境中取值，一般是实现编程导航或关闭 sheet

学习资料

遇到一些感觉不错的博客，分享出来：

专栏：知乎 - 肘子的Swift记事本

专栏：博客 - OneV’s Den

专栏：博客 - コニクマル

专栏：知乎 - SwiftUI成神之路

Landmarks：https://swiftui.jokerhub.cn

代码示例：Gitee - swiftui-example

代码示例：Gitee - SwiftUI

开源项目

在学习的过程，我找到了一些不错的开源项目，特此分享：

以下项目全部来自 Github 或者 Gitee

戴铭的 Swift 小册子：SwiftPamphletApp

SwiftUI 新特性： FeaturesDemo

Designers-Code 代码：SwiftUI-For-Designers-Code

模仿 Gitee 开发的 iOS 端：open-source-ios-apps

学习网络请求的项目：CatAPISwiftUI

语音识别功能的项目：SayMyName

简单的入门项目：cowboy-wisdom-swiftui

模仿微信开发的 iOS 端：SwiftUI-WeChat

SpringCloud + 前端 + iOS 的博客项目：NeptuneBlog-iOS

SwiftUI 中图表：ChartView

一些问题记录

解决 Text 文本显示不全的问题：

.fixedSize(horizontal: false, vertical: true)

地图相关：

• SwiftUI 获取当前位置：Using CoreLocation With SwiftUI
• SwiftUI 中跳转苹果自带地图：Github - OpenMapInSwiftUI

下拉刷新：

• 下拉刷新、上拉加载：SwiftUI-Refresh
• iOS 15 新特性：.refrehable

获取今日 23:59:59：

func getTodayEndTime() -> Date {
    let date = Date() // current date or replace with a specific date
    let calendar = Calendar.current
    let endTime = calendar.date(bySettingHour: 23, minute: 59, second: 59, of: date)
    return endTime!
}

项目预览

这个项目不是个人项目，不能开源，界面也不能全部放出来，只能放出一些简单的功能性代表（且不涉及企业信息）的界面，下面是部分界面…