級別：★☆☆☆☆
標簽：「iOS 13」「SwiftUI」「Xcode 11.1」
作者： 647
審校： QiShare團隊
前言：
之前同事WYongW寫了一篇《用Flutter寫一個簡單頁面》，本篇將和大家一起調研一下蘋果今年推出的SwiftUI框架。
接下來，讓我們一起入門一下SwiftUI（嘗嘗鮮）。
一、SwiftUI是什么？
1. 定義：
簡單來說，SwiftUI是蘋果在“WWDC-2019”推出的一款全新的“聲明式UI”框架。
拆開看，Swift + UI。（由此可以看出Swift越來越重要）
2. 特點：
“簡潔迅速”的Swift：越來越簡潔的
Swift語法，配上Swift迅速的優勢。“即視”的UI：降低調試成本，一邊寫
code、一邊就可查看UI。跨平臺：一套代碼，即可完成
iOS、iPadOS、macOS、watchOS的開發與適配。
- “聲明式”編程：
簡單來說，對比之前的“指令式”編程，我們通常需要告訴計算機“怎么做”？
而“聲明式”編程是讓我們告訴計算機“做什么”？（至于最底層怎么做，我們無需關心。）
舉個例子，對于寫UI而言，
- 指令式編程：就是，怎么畫？把每個
frame、layout等等統統需要計算到位。 - 聲明式編程：就是，畫什么？把想要的效果描述出來，其他都交給框架去做。
3. 開發環境：
這么新的技術肯定需要環境的支持。SwiftUI所需要的開發環境，如下：
- Xcode：
Xcode 11.1+。 - MacOS：
MacOS 10.15+。 - iOS：
iOS 13+。
PS：由于
SwiftUI只能應用與iOS 13系統以上的設備。
因此，這項技術不建議用在需要適配低版本（iOS 13以下）的App上。
不過如果是無需適配低版本的新項目，或者學習者全可以上手“玩一玩”。
畢竟蘋果的新技術還是很有意思的嘛~
二、SwiftUI的基本組件（語法）
這塊知識比較“基礎”且“重要”。只有記住了這些基本組件，我們才能用較少的代碼開發出精美的App。
下面，我將給大家介紹一些重要的SwiftUI組件：
組件介紹：
| 名稱 | 含義 |
|---|---|
| Text | 用來顯示文本的組件，類似UIKit中的UILabel。 |
| Image | 用來展示圖片的組件，類似UIKit中的UIImageView。 |
| Button | 用于可點擊的按鈕組件，類似UIKit中的UIButton。 |
| List | 用來展示列表的組件，類似UIKit中的UITableView。 |
| ScrollView | 用來支持滑動的組件，類似UIKit中的UIScrollView。 |
| Spacer | 一個靈活的空間，用來填充空白的組件。 |
| Divider | 一條分割線，用來劃分區域的組件。 |
| VStack | 將子視圖按“豎直方向”排列布局。（Vertical stack） |
| HStack | 將子視圖按“水平方向”排列布局。（Horizontal stack） |
| ZStack | 將子視圖按“兩軸方向均對齊”布局（居中，有重疊效果） |
基本組件：
- Text：用來顯示文本的組件，類似UIKit中的
UILabel。
Text("Hello, we are QiShare!").foregroundColor(.blue).font(.system(size: 32.0))
- Image：用來展示圖片的組件，類似UIKit中的
UIImageView。
Image.init(systemName: "star.fill").foregroundColor(.yellow)
- Button：用于可點擊的按鈕組件，類似UIKit中的
UIButton。
Button(action: { self.showingProfile.toggle() }) {
Image(systemName: "paperplane.fill")
.imageScale(.large)
.accessibility(label: Text("Right"))
.padding()
}
- List：用來展示列表的組件，類似UIKit中的
UITableView。
List(0..<5){_ in
NavigationLink.init(destination: VStack(alignment:.center){
Image.init(systemName: "\(item+1).square.fill").foregroundColor(.green)
Text("詳情界面\(item + 1)").font(.system(size: 16))
}) {
//ListRow
}
ScrollView：用來支持滑動的組件，類似UIKit中的
UIScrollView。Spacer：一個靈活的空間，用來填充空白的組件。
Divider：一條分割線，用來劃分區域的組件。
布局組件：
VStack：將子視圖按“豎直方向”布局。（Vertical stack）
HStack：將子視圖按“水平方向”布局。（Horizontal stack）
ZStack：將子視圖按“兩軸方向均對齊”布局。
功能組件：
NavigationView：負責App中導航功能的組件，類似UIKit中的
UINavigationView。NavigationLink：負責App頁面跳轉的組件，類似于
UINavigationView中的push與pop功能。
NavigationView {
List(0..<5){_ in
NavigationLink.init(destination: VStack(alignment:.center){
Image.init(systemName: "\(item+1).square.fill").foregroundColor(.green)
Text("詳情界面\(item + 1)").font(.system(size: 16))
}) {
//ListRow
}
}
.navigationBarTitle("導航\(item)",displayMode: .inline)
- TabView：負責App中的標簽頁功能的組件，類似UIKit中的
UITabBarController。
TabView {
Text("The First Tab")
.tabItem {
Image(systemName: "1.square.fill")
Text("First")
}
Text("Another Tab")
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}
Text("The Last Tab")
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}
}
.font(.headline)
三、SwiftUI快速上手實踐
下面讓我們快速實現一個有TabView、NavigationView、List的Demo。
SF Symbols 是從 iOS 13 和 macOS 10.15 開始內置于系統中的字符圖標庫，它提供了上千種常見的線條圖標，而且我們可以任意地為它們設置尺寸，顏色等屬性。Apple 甚至準備了專門的app：SF Symbols 來幫助你查看可用的符號：
接下來就讓我們用這些Symbols制作個小Demo。
- ContentView：
import SwiftUI
struct ContentView: View {
@State var isLeftNav = false
@State var isRightNav = false
init() {
//修改導航欄文字顏色
UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.systemBlue]
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.systemBlue]
UINavigationBar.appearance().tintColor = .systemBlue
}
var body: some View {
TabView {
// Tab1:
NavigationView {
List(Symbols, id:\.self) {
ListRow(symbol: $0)
}
.navigationBarTitle(Text("SF Symbols"))
.navigationBarItems(leading: leftNavButton, trailing: rightNavButton)
}.tabItem {
Image.init(systemName: "star.fill")
Text("Tab1").font(.subheadline)
}
// Tab2:
NavigationView {
Text("This is the second tab.")
}.tabItem {
Image.init(systemName: "star.fill")
Text("Tab2").font(.subheadline)
}
}
}
var leftNavButton: some View {
Button(action: { self.isLeftNav.toggle() }) {
Image(systemName: "person.crop.circle")
.imageScale(.large)
.accessibility(label: Text("Left"))
.padding()
}
.sheet(isPresented: $isLeftNav) {
VStack {
Text("Hello, we are QiShare!").foregroundColor(.blue).font(.system(size: 32.0))
HStack {
Spacer()
Spacer()
Text("an iOS Team. ").fontWeight(.black).foregroundColor(.purple)
Spacer()
Text("We are learning SwiftUI.").foregroundColor(.blue)
Spacer()
}
}
}
}
var rightNavButton: some View {
Button(action: { self.isRightNav.toggle() }) {
Image(systemName: "paperplane.fill")
.imageScale(.large)
.accessibility(label: Text("Right"))
.padding()
}
.sheet(isPresented: $isRightNav, onDismiss: {
print("dissmiss RrightNav")
}) {
ZStack {
Text("This is the Right Navi Button.")
}
}
}
}
- ListRow：List對應的Cell
struct ListRow: View {
var symbol: String
var body: some View {
NavigationLink(destination: ListDetail(symbol: symbol)) {
HStack {
//圖片
Image(systemName: symbol)
.resizable()
.frame(width: 60, height: 60)
.foregroundColor(Colors.randomElement())
//分割
Divider()
Spacer()
//文字
Text(symbol)
Spacer()
}
}
}
}
- ListDetail：
import SwiftUI
struct ListDetail: View {
var symbol: String
var body: some View {
VStack {
Text("Image:").font(.headline)
Spacer()
Image(systemName: symbol)
.foregroundColor(Colors.randomElement())
.imageScale(.large)
.scaleEffect(3)
.padding(.bottom, 100)
Divider()
Text("Image Name:").font(.headline)
Spacer()
Text(symbol)
.font(.largeTitle)
Spacer()
}
.navigationBarTitle(symbol)
}
}
源碼：本文Demo
推薦文章：
iOS 控制日志的開關
iOS App中可拆卸一個framework的兩種方式
自定義WKWebView顯示內容（一）
Swift 5.1 (6) - 函數
Swift 5.1 (5) - 控制流
Xcode11 新建工程中的SceneDelegate
iOS App啟動優化（二）—— 使用“Time Profiler”工具監控App的啟動耗時
iOS App啟動優化（一）—— 了解App的啟動流程
iOS WKWebView的基本使用
Swift 5.1 (4) - 集合類型
