SwiftUI學習（一）

時間  2019-11-07
標籤 swiftui 學習 简体版
原文   原文鏈接

總覽

若是你想要入門 SwiftUI 的使用，那 Apple 此次給出的官方教程絕對給力。這個教程提供了很是詳盡的步驟和說明，網頁的交互也是一流，是以爲值得看和動手學習的參考。react

不過，SwiftUI 中有一些值得注意的細節在教程裏並無太詳細說起，也可能形成一些困惑。這篇文章以個人我的觀點對教程的某些部分進行了補充說明，但願能在你們跟隨教程學習 SwiftUI 的時候有點幫助。這篇文章的推薦閱讀方式是，一邊參照 SwiftUI 教程實際動手進行實現，一邊在到達對應步驟時參照本文加深理解。在下面每段內容前我標註了對應的教程章節和連接，以供參考。git

在開始學習 SwiftUI 以前，咱們須要大體瞭解一個問題：爲何咱們會須要一個新的 UI 框架。github

爲何須要 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 也頻頻出現。canvas

聲明式的界面開發方式

近年來，隨着編程技術和思想的進步，使用聲明式或者函數式的方式來進行界面開發，已經愈來愈被接受並逐漸成爲主流。最先的思想大概是來源於 Elm，以後這套方式被 React 和 Flutter 採用，這一點上 SwiftUI 也幾乎與它們一致。總結起來，這些 UI 框架都遵循如下步驟和原則：swift

  1. 使用各自的 DSL 來描述「UI 應該是什麼樣子」，而不是用一句句的代碼來指導「要怎樣構建 UI」。數組

    好比傳統的 UIKit，咱們會使用這樣的代碼來添加一個 「Hello World」 的標籤，它負責「建立 label」，「設置文字」，「將其添加到 view 上」：session

    func viewDidLoad() {
     super.viewDidLoad()
     let label = UILabel()
     label.text = "Hello World"
     view.addSubview(label)
     // 省略了佈局的代碼
 }

    而相對起來，使用 SwiftUI 咱們只須要告訴 SDK 咱們須要一個文字標籤：數據結構

    var body: some View {
     Text("Hello World")
 }

  2. 接下來，框架內部讀取這些 view 的聲明，負責將它們以合適的方式繪製渲染。閉包

    注意，這些 view 的聲明只是純數據結構的描述，而不是實際顯示出來的視圖，所以這些結構的建立和差分對比並不會帶來太多性能損耗。相對來講，將描述性的語言進行渲染繪製的部分是最慢的，這部分工做將交由框架以黑盒的方式爲咱們完成。

  3. 若是 View 須要根據某個狀態 (state) 進行改變，那咱們將這個狀態存儲在變量中，並在聲明 view 時使用它：

    @State var name: String = "Tom"
 var body: some View {
     Text("Hello \(name)")
 }

    關於代碼細節能夠先忽略，咱們稍後會更多地解釋這方面的內容。

  4. 狀態發生改變時，框架從新調用聲明部分的代碼，計算出新的 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 的類型，可是這帶來一些麻煩：

  1. 每次修改 body 的返回時咱們都須要手動去更改相應的類型。
  2. 新建一個 View 的時候，咱們都須要去考慮會是什麼類型。
  3. 其實咱們只關心返回的是否是一個 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 的方案來講，獲得了語言和編譯器層級的大力支持。若是有機會，我想我也會對這方面的內容進行一些探索和介紹。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程