SwiftUI學習(一)
總覽
如果你想要入門 SwiftUI 的使用,那 Apple 這次給出的官方教程絕對給力。這個教程提供了非常詳盡的步驟和說明,網頁的互動也是一流,是覺得值得看和動手學習的參考。
不過,SwiftUI 中有一些值得注意的細節在教程裡並沒有太詳細提及,也可能造成一些困惑。這篇文章以我的個人觀點對教程的某些部分進行了補充說明,希望能在大家跟隨教程學習 SwiftUI 的時候有點幫助。這篇文章的推薦閱讀方式是,一邊參照 SwiftUI 教程實際動手進行實現,一邊在到達對應步驟時參照本文加深理解。在下面每段內容前我標註了對應的教程章節和連結,以供參考。
在開始學習 SwiftUI 之前,我們需要大致瞭解一個問題:為什麼我們會需要一個新的 UI 框架。
為什麼需要 SwiftUI
UIKit 面臨的挑戰
對於 Swift 開發者來說,昨天的 WWDC 19 首日 Keynote 和 Platforms State of the Union 上最引人注目的內容自然是 SwiftUI 的公佈了。從 iOS SDK 2.0 開始,UIKit 已經伴隨廣大 iOS 開發者經歷了接近十年的風風雨雨。UIKit 的思想繼承了成熟的 AppKit 和 MVC,在初出時,為 iOS 開發者提供了良好的學習曲線。
UIKit 提供的是一套符合直覺的,基於控制流的命令式的程式設計方式。最主要的思想是在確保 View 或者 View Controller 生命週期以及使用者互動時,相應的方法 (比如 viewDidLoad
或者某個 target-action 等) 能夠被正確呼叫,從而構建使用者介面和邏輯。不過,不管是從使用的便利性還是穩定性來說,UIKit 都面臨著巨大的挑戰。我個人勉強也能算是 iOS 開發的“老司機”了,但是「掉到 UIKit 的坑裡」這件事,也幾乎還是我每天的日常。UIKit 的基本思想要求 View Controller 承擔絕大部分職責,它需要協調 model,view 以及使用者互動。這帶來了巨大的 side effect 以及大量的狀態,如果沒有妥善安置,它們將在 View Controller 中混雜在一起,同時作用於 view 或者邏輯,從而使狀態管理愈發複雜,最後甚至不可維護而導致專案失敗。不僅是作為開發者我們自己寫的程式碼,UIKit 本身內部其實也經常受困於可變狀態,各種奇怪的 bug 也頻頻出現。
宣告式的介面開發方式
近年來,隨著程式設計技術和思想的進步,使用宣告式或者函式式的方式來進行介面開發,已經越來越被接受並逐漸成為主流。最早的思想大概是來源於 Elm,之後這套方式被 React 和 Flutter 採用,這一點上 SwiftUI 也幾乎與它們一致。總結起來,這些 UI 框架都遵循以下步驟和原則:
-
使用各自的 DSL 來描述「UI 應該是什麼樣子」,而不是用一句句的程式碼來指導「要怎樣構建 UI」。
比如傳統的 UIKit,我們會使用這樣的程式碼來新增一個 “Hello World” 的標籤,它負責“建立 label”,“設定文字”,“將其新增到 view 上”:
func viewDidLoad() { super.viewDidLoad() let label = UILabel() label.text = "Hello World" view.addSubview(label) // 省略了佈局的程式碼 }
而相對起來,使用 SwiftUI 我們只需要告訴 SDK 我們需要一個文字標籤:
var body: some View { Text("Hello World") }
-
接下來,框架內部讀取這些 view 的宣告,負責將它們以合適的方式繪製渲染。
注意,這些 view 的宣告只是純資料結構的描述,而不是實際顯示出來的檢視,因此這些結構的建立和差分對比並不會帶來太多效能損耗。相對來說,將描述性的語言進行渲染繪製的部分是最慢的,這部分工作將交由框架以黑盒的方式為我們完成。
-
如果
View
需要根據某個狀態 (state) 進行改變,那我們將這個狀態儲存在變數中,並在宣告 view 時使用它:@State var name: String = "Tom" var body: some View { Text("Hello \(name)") }
關於程式碼細節可以先忽略,我們稍後會更多地解釋這方面的內容。
-
狀態發生改變時,框架重新呼叫宣告部分的程式碼,計算出新的 view 宣告,並和原來的 view 進行差分,之後框架負責對變更的部分進行高效的重新繪製。
SwiftUI 的思想也完全一樣,而且實際處理也不外乎這幾個步驟。使用描述方式開發,大幅減少了在 app 開發者層面上出現問題的機率。
一些細節解讀
官方教程中對宣告式 UI 的程式設計思想有深刻的體現。另外,SwiftUI 中也採用了非常多 Swift 5.1 的新特性,會讓習慣了 Swift 4 或者 5 的開發者“耳目一新”。接下來,我會分幾個話題,對官方教程的一些地方進行解釋和探索。
教程 1 - Creating and Combining Views
Section 1 - Step 3: SwiftUI app 的啟動
建立 app 之後第一件好奇的事情是,SwiftUI app 是怎麼啟動的。
教程示例 app 在 AppDelegate 中通過 application(_:configurationForConnecting:options)
返回了一個名為 “Default Configuration” 的 UISceneConfiguration
例項:
func application(
_ application: UIApplication,
configurationForConnecting connectingSceneSession: UISceneSession,
options: UIScene.ConnectionOptions) -> UISceneConfiguration
{
return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
}
這個名字的 Configuration 在 Info.plist 的 “UIApplicationSceneManifest -> UISceneConfigurations” 中進行了定義,指定了 Scene Session Delegate 類為 $(PRODUCT_MODULE_NAME).SceneDelegate
。這部分內容是 iOS 13 中新加入的通過 Scene 管理 app 生命週期的方式,以及多視窗支援部分所需要的程式碼。這部分不是我們今天的話題。在 app 完成啟動後,控制權被交接給 SceneDelegate
,它的 scene(_:willConnectTo:options:)
將會被呼叫,進行 UI 的配置:
func scene(
_ scene: UIScene,
willConnectTo session: UISceneSession,
options connectionOptions: UIScene.ConnectionOptions)
{
let window = UIWindow(frame: UIScreen.main.bounds)
window.rootViewController = UIHostingController(rootView: ContentView())
self.window = window
window.makeKeyAndVisible()
}
這部分內容就是標準的 iOS app 啟動流程了。UIHostingController
是一個 UIViewController
子類,它將負責接受一個 SwiftUI 的 View 描述並將其用 UIKit 進行渲染 (在 iOS 下的情況)。UIHostingController
就是一個普通的 UIViewController
,因此完全可以做到將 SwiftUI 建立的介面一點點整合到已有的 UIKit app 中,而並不需要從頭開始就是基於 SwiftUI 的構建。
由於 Swift ABI 已經穩定,SwiftUI 是一個搭載在使用者 iOS 系統上的 Swift 框架。因此它的最低支援的版本是 iOS 13,可能想要在實際專案中使用,還需要等待一兩年時間。
Section 1 - Step 4: 關於 some View
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}
一眼看上去可能會對 some
比較陌生,為了講明白這件事,我們先從 View
說起。
View
是 SwiftUI 的一個最核心的協議,代表了一個螢幕上元素的描述。這個協議中含有一個 associatedtype:
public protocol View : _View {
associatedtype Body : View
var body: Self.Body { get }
}
這種帶有 associatedtype 的協議不能作為型別來使用,而只能作為型別約束使用:
// Error
func createView() -> View {
}
// OK
func createView<T: View>() -> T {
}
這樣一來,其實我們是不能寫類似這種程式碼的:
// Error,含有 associatedtype 的 protocol View 只能作為型別約束使用
struct ContentView: View {
var body: View {
Text("Hello World")
}
}
想要 Swift 幫助自動推斷出 View.Body
的型別的話,我們需要明確地指出 body
的真正的型別。在這裡,body
的實際型別是 Text
:
struct ContentView: View {
var body: Text {
Text("Hello World")
}
}
當然我們可以明確指定出 body
的型別,但是這帶來一些麻煩:
- 每次修改
body
的返回時我們都需要手動去更改相應的型別。 - 新建一個
View
的時候,我們都需要去考慮會是什麼型別。 - 其實我們只關心返回的是不是一個
View
,而對實際上它是什麼型別並不感興趣。
some View
這種寫法使用了 Swift 5.1 的 Opaque return types 特性。它向編譯器作出保證,每次 body
得到的一定是某一個確定的,遵守 View
協議的型別,但是請編譯器“網開一面”,不要再細究具體的型別。返回型別確定單一這個條件十分重要,比如,下面的程式碼也是無法通過的:
let someCondition: Bool
// Error: Function declares an opaque return type,
// but the return statements in its body do not have
// matching underlying types.
var body: some View {
if someCondition {
// 這個分支返回 Text
return Text("Hello World")
} else {
// 這個分支返回 Button,和 if 分支的型別不統一
return Button(action: {}) {
Text("Tap me")
}
}
}
這是一個編譯期間的特性,在保證 associatedtype protocol 的功能的前提下,使用 some
可以抹消具體的型別。這個特性用在 SwiftUI 上簡化了書寫難度,讓不同 View
宣告的語法上更加統一。
Section 2 - Step 1: 預覽 SwiftUI
SwiftUI 的 Preview 是 Apple 用來對標 RN 或者 Flutter 的 Hot Reloading 的開發工具。由於 IBDesignable 的效能上的慘痛教訓,而且得益於 SwiftUI 經由 UIKit 的跨 Apple 平臺的特性,Apple 這次選擇了直接在 macOS 上進行渲染。因此,你需要使用搭載有 SwiftUI.framework 的 macOS 10.15 才能夠看到 Xcode Previews 介面。
Xcode 將對程式碼進行靜態分析 (得益於 SwiftSyntax 框架),找到所有遵守 PreviewProvider
協議的型別進行預覽渲染。另外,你可以為這些預覽提供合適的資料,這甚至可以讓整個介面開發流程不需要實際執行 app 就能進行。
筆者自己嘗試下來,這套開發方式帶來的效率提升相比 Hot Reloading 要更大。Hot Reloading 需要你有一個大致介面和準備相應資料,然後執行 app,停在要開發的介面,再進行調整。如果資料狀態發生變化,你還需要 restart app 才能反應。SwiftUI 的 Preview 相比起來,不需要執行 app 並且可以提供任何的 dummy 資料,在開發效率上更勝一籌。
經過短短一天的使用,Option + Command + P 這個重新整理 preview 的快捷鍵已經深入到我的肌肉記憶中了。
Section 3 - Step 5: 關於 ViewBuilder
建立 Stack 的語法很有趣:
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
Text("Joshua Tree National Park")
.font(.subheadline)
}
一開始看起來好像我們給出了兩個 Text
,似乎是構成的是一個類似陣列形式的 [View]
,但實際上並不是這麼一回事。這裡呼叫了 VStack
型別的初始化方法:
public struct VStack<Content> where Content : View {
init(
alignment: HorizontalAlignment = .center,
spacing: Length? = nil,
content: () -> Content)
}
前面的 alignment
和 spacing
沒啥好說,最後一個 content
比較有意思。看簽名的話,它是一個 () -> Content
型別,但是我們在建立這個 VStack
時所提供的程式碼只是簡單列舉了兩個 Text
,而並沒有實際返回一個可用的 Content
。
這裡使用了 Swift 5.1 的另一個新特性:Funtion builders。如果你實際觀察 VStack
的這個初始化方法的簽名,會發現 content
前面其實有一個 @ViewBuilder
標記:
init(
alignment: HorizontalAlignment = .center,
spacing: Length? = nil,
@ViewBuilder content: () -> Content)
而 ViewBuilder
則是一個由 @_functionBuilder
進行標記的 struct:
@_functionBuilder public struct ViewBuilder { /* */ }
使用 @_functionBuilder
進行標記的型別 (這裡的 ViewBuilder
),可以被用來對其他內容進行標記 (這裡用 @ViewBuilder
對 content
進行標記)。被用 function builder 標記過的 ViewBuilder
標記以後,content
這個輸入的 function 在被使用前,會按照 ViewBuilder
中合適的 buildBlock
進行 build 後再使用。如果你閱讀 ViewBuilder
的文件,會發現有很多接受不同個數引數的 buildBlock
方法,它們將負責把閉包中一一列舉的 Text
和其他可能的 View
轉換為一個 TupleView
,並返回。由此,content
的簽名 () -> Content
可以得到滿足。
實際上構建這個 VStack
的程式碼會被轉換為類似下面這樣:
// 等效虛擬碼,不能實際編譯。
VStack(alignment: .leading) { viewBuilder -> Content in
let text1 = Text("Turtle Rock").font(.title)
let text2 = Text("Joshua Tree National Park").font(.subheadline)
return viewBuilder.buildBlock(text1, text2)
}
當然這種基於 funtion builder 的方式是有一定限制的。比如 ViewBuilder
就只實現了最多十個引數的 buildBlock
,因此如果你在一個 VStack
中放超過十個 View
的話,編譯器就會不太高興。不過對於正常的 UI 構建,十個引數應該足夠了。如果還不行的話,你也可以考慮直接使用 TupleView
來用多元組的方式合併 View
:
TupleView<(Text, Text)>(
(Text("Hello"), Text("Hello"))
)
除了按順序接受和構建 View
的 buildBlock
以外,ViewBuilder
還實現了兩個特殊的方法:buildEither
和 buildIf
。它們分別對應 block 中的 if...else
的語法和 if
的語法。也就是說,你可以在 VStack
裡寫這樣的程式碼:
var someCondition: Bool
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
Text("Joshua Tree National Park")
.font(.subheadline)
if someCondition {
Text("Condition")
} else {
Text("Not Condition")
}
}
其他的命令式的程式碼在 VStack
的 content
閉包裡是不被接受的,下面這樣也不行:
VStack(alignment: .leading) {
// let 語句無法通過 function builder 建立合適的輸出
let someCondition = model.condition
if someCondition {
Text("Condition")
} else {
Text("Not Condition")
}
}
到目前為止,只有以下三種寫法能被接受 (有可能隨著 SwiftUI 的發展出現別的可接受寫法):
- 結果為
View
的語句 if
語句if...else...
語句
Section 4 - Step 7: 鏈式呼叫修改 View 的屬性
教程到這一步的話,相信大家已經對 SwiftUI 的超強表達能力有所感悟了。
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
}
可以試想一下,在 UIKit 中要動手擼一個這個效果的困難程度。我大概可以保證,99% 的開發者很難在不借助文件或者 copy paste 的前提下完成這些事情,但是在 SwiftUI 中簡直信手拈來。在建立 View
之後,用鏈式呼叫的方式,可以將 View
轉換為一個含有變更後內容的物件。這麼說比較抽象,我們可以來看一個具體的例子。比如簡化一下上面的程式碼:
let image: Image = Image("turtlerock")
let modified: _ModifiedContent<Image, _ShadowEffect> = image.shadow(radius: 10)
image
通過一個 .shadow
的 modifier,modified
變數的型別將轉變為 _ModifiedContent<Image, _ShadowEffect>
。如果你檢視 View
上的 shadow
的定義,它是這樣的:
extension View {
func shadow(
color: Color = Color(.sRGBLinear, white: 0, opacity: 0.33),
radius: Length, x: Length = 0, y: Length = 0)
-> Self.Modified<_ShadowEffect>
}
Modified
是 View
上的一個 typealias,在 struct Image: View
的實現裡,我們有:
public typealias Modified<T> = _ModifiedContent<Self, T>
_ModifiedContent
是一個 SwiftUI 的私有型別,它儲存了待變更的內容,以及用來實施變更的 Modifier
:
struct _ModifiedContent<Content, Modifier> {
var content: Content
var modifier: Modifier
}
在 Content
遵守 View
,Modifier
遵守 ViewModifier
的情況下,_ModifiedContent
也將遵守 View
,這是我們能夠通過 View
的各個 modifier extension 進行鏈式呼叫的基礎:
extension _ModifiedContent : _View
where Content : View, Modifier : ViewModifier
{
}
在 shadow
的例子中,SwiftUI 內部會使用 _ShadowEffect
這個 ViewModifier
,並把 image
自身和 _ShadowEffect
例項存放到 _ModifiedContent
裡。不論是 image 還是 modifier,都只是對未來實際檢視的描述,而不是直接對渲染進行的操作。在最終渲染前,ViewModifier
的 body(content: Self.Content) -> Self.Body
將被呼叫,以給出最終渲染層所需要的各個屬性。
更具體來說,
_ShadowEffect
是一個滿足EnvironmentalModifier
協議的型別,這個協議要求在使用前根據使用環境將自身解析為具體的 modifier。
其他的幾個修改 View 屬性的鏈式呼叫與 shadow
的原理幾乎一致。
小結
上面是對 SwiftUI 教程的第一部分進行的一些說明,在之後的一篇文章裡,我會對剩餘的幾個教程中有意思的部分再做些解釋。
雖然公開還只有一天,但是 SwiftUI 已經經常被用來和 Flutter 等框架進行比較。試用下來,在 view 的描述表現力上和與 app 的結合方面,SwiftUI 要勝過 Flutter 和 Dart 的組合很多。Swift 雖然開源了,但是 Apple 對它的掌控並沒有減弱。Swift 5.1 的很多特性幾乎可以說都是為了 SwiftUI 量身定製的,我們已經在本文中看到了一些例子,比如 Opaque return types 和 Function builder 等。在接下來對後面幾個教程的解讀中,我們還會看到更多這方面的內容。
另外,Apple 在背後使用 Combine.framework 這個響應式程式設計框架來對 SwiftUI.framework 進行驅動和資料繫結,相比於現有的 RxSwift/RxCocoa 或者是 ReactiveSwift 的方案來說,得到了語言和編譯器層級的大力支援。如果有機會,我想我也會對這方面的內容進行一些探索和介紹。
相關文章
- SwiftUI 學習路線圖SwiftUI
- 解析SwiftUI佈局細節(一)SwiftUI
- SwiftUI or Flutter ?SwiftUIFlutter
- SwiftUI【0】SwiftUI
- SwiftUI進階之 15 軟體的本意是什麼? (《SICP》學習筆記)SwiftUI筆記
- 用SwiftUI寫一個簡單頁面SwiftUI
- 【譯】Fucking SwiftUISwiftUI
- 深度學習(一)深度學習學習資料深度學習
- 關於SwiftUI,看這一篇就夠了SwiftUI
- Golang 學習——interface 介面學習(一)Golang
- swiftUI-@Environment的作用SwiftUI
- swiftUI-extension的使用SwiftUI
- swiftUI-@State 的作用SwiftUI
- swiftUI- @Observable的使用SwiftUI
- Flutter學習記錄(一)Dart學習FlutterDart
- kitten 學習教程(一) 學習筆記筆記
- 整合學習(一):簡述整合學習
- Zookeeper學習(一)
- Lucene學習一
- flask學習(一)Flask
- 學習 Swoole(一)
- Html學習一HTML
- thymeleaf學習(一)
- less學習一
- JavaScript學習一JavaScript
- TypeScript 學習(一)TypeScript
- JavaScipt學習(一)Java
- Vue學習一Vue
- Makefile學習(一)
- mysql學習(一)MySql
- Git 學習一Git
- Drools學習(一)
- canvas學習(一)Canvas
- DWR學習(一)
- SwiftUI Image 圖片處理SwiftUI
- 打通SwiftUI任督二脈SwiftUI
- OSSEC 學習教程一
- Sphinx Search 學習 (一)