SwiftUI 學習路線圖

知識小集發表於2020-01-18

2019年 iOS 開發領域發生了巨大變化。我們有了一個新的 SwiftUI 框架。SwiftUI 是為 Apple 生態系統構建應用程式的全新的宣告式方式。在這裡讓我們來構建一個 SwiftUI 學習曲線。我想與您分享學習 SwiftUI 所需的所有的文章列表。

基本

蘋果今年整理了一份 SwiftUI 教程1,這是一項出色的工作。我建議從這些教程開始學習 SwiftUI 的基礎知識。

屬性包裝器是用於支援 SwiftUI 框架的 Swift 語言新功能之一。要了解最重要的屬性包裝器,例如 @State,@Binding,@ObservedObject,@EnvironmentObject 和 @Environment,請閱讀我的 Understanding Property Wrappers in SwiftUI2 一文。

我寫的另一篇有關 SwiftUI 機制的文章是 You have to change mindset to use SwiftUI3 。 它應該可以幫助您瞭解 SwiftUI 的工作原理。

[1]https://developer.apple.com/tutorials/swiftui/
[2]https://swiftwithmajid.com/2019/06/12/understanding-property-wrappers-in-swiftui/
[3]https://swiftwithmajid.com/2019/11/19/you-have-to-change-mindset-to-use-swiftui/

佈局系統

SwiftUI 也有一個全新的佈局系統,它比 AutoLayout 擁有更多的樂趣。新的佈局系統非常強大且直接。我強烈建議您閱讀這些文章,以瞭解新的佈局系統及其好處。

SwiftUI Layout System5

Inspecting the View Tree – Part 1: PreferenceKey6

Inspecting the View Tree – Part 2: AnchorPreferences7

Inspecting the View Tree – Part 3: Nested Views8

[5]https://kean.github.io/post/swiftui-layout-system
[6]https://swiftui-lab.com/communicating-with-the-view-tree-part-1/
[7]https://swiftui-lab.com/communicating-with-the-view-tree-part-2/
[8]https://swiftui-lab.com/communicating-with-the-view-tree-part-3/

框架

SwiftUI 與 React 框架有很多相似之處,為 iOS 開發帶來了許多新概念。我使用這些想法構建了一些應用程式,並且非常喜歡它的工作方式。以下是一些有用的文章列表。

Introducing Container views in SwiftUI9

Modeling app state using Store objects in SwiftUI10

Redux-like state container in SwiftUI11

[9]https://swiftwithmajid.com/2019/07/31/introducing-container-views-in-swiftui/
[10]https://swiftwithmajid.com/2019/09/04/modeling-app-state-using-store-objects-in-swiftui/
[11]https://swiftwithmajid.com/2019/09/18/redux-like-state-container-in-swiftui/

SwiftUI 的宣告式

SwiftUI 是一個宣告式框架。這意味著您宣告要實現的目標,然後框架會處理該問題並決定如何呈現您的檢視。根據上下文,完全相同的檢視可以具有另一種外觀。我寫了一些關於 SwiftUI 中宣告式方法的文章。

Building forms with SwiftUI11

View composition in SwiftUI12

Reusing SwiftUI views across Apple platforms13

ViewModifiers in SwiftUI14

Composable styling in SwiftUI16

[12]https://swiftwithmajid.com/2019/06/19/building-forms-with-swiftui/
[13]https://swiftwithmajid.com/2019/10/30/view-composition-in-swiftui/
[14]https://swiftwithmajid.com/2019/10/23/reusing-swiftui-views-across-apple-platforms/
[15]https://swiftwithmajid.com/2019/08/07/viewmodifiers-in-swiftui/
[16]https://swiftwithmajid.com/2019/08/28/composable-styling-in-swiftui/

動畫和互動

SwiftUI 使用動畫來為您處理所有狀態更改。它使我們能夠以一種非常直接且美觀的方式來構建互動式檢視。我在部落格上多次討論了這個主題。

Animations in SwiftUI17

Gestures in SwiftUI18

Building Bottom sheet in SwiftUI19

Building Pager view in SwiftUI20

[17]https://swiftwithmajid.com/2019/06/26/animations-in-swiftui/
[18]https://swiftwithmajid.com/2019/07/10/gestures-in-swiftui/
[19]https://swiftwithmajid.com/2019/12/11/building-bottom-sheet-in-swiftui/
[20]https://swiftwithmajid.com/2019/12/25/building-pager-view-in-swiftui/

我還想提提 Javier 關於 SwiftUI 中高階動畫的出色系列文章。

Advanced SwiftUI Animations – Part 1: Paths21

Advanced SwiftUI Animations – Part 2: GeometryEffect22

Advanced SwiftUI Animations – Part 3: AnimatableModifier23

[21]https://swiftui-lab.com/swiftui-animations-part1/
[22]https://swiftui-lab.com/swiftui-animations-part2/
[23]https://swiftui-lab.com/swiftui-animations-part3/

輔助功能

SwiftUI 採取了另一舉措,使我們的應用程式預設可訪問。它開箱即用,但是它也提供了一個非常好的 API 來自定義可訪問性。要了解有關 SwiftUI 中可訪問性的更多資訊,建議閱讀以下文章:

Accessibility in SwiftUI24

Dynamic Type in SwiftUI25

Localization in SwiftUI26

[24]https://swiftwithmajid.com/2019/09/10/accessibility-in-swiftui/
[25]https://swiftwithmajid.com/2019/10/09/dynamic-type-in-swiftui/
[26]https://swiftwithmajid.com/2019/10/16/localization-in-swiftui/

繪製自定義檢視

SwiftUI 提供了一個 Shape API,使我們能夠快速構建自定義檢視。我在其中一個應用程式中製作圖表時瞭解了這一點。

Building BarChart with Shape API in SwiftUI27

Gradient in SwiftUI28

GeometryReader to the Rescue29

[27]https://swiftwithmajid.com/2019/08/14/building-barchart-with-shape-api-in-swiftui/
[28]https://swiftwithmajid.com/2019/11/13/gradient-in-swiftui/
[29]https://swiftui-lab.com/geometryreader-to-the-rescue/

結論

2019 是非常重要的一年,我希望我們能在 WWDC 2020 期間獲得具有許多新功能的 SwiftUI 2.0。在下一個 SwiftUI 版本釋出之前,我們還有很多事情要學習。

相關文章