­

Hacking with iOS: SwiftUI Edition 里程碑(一)之 What you learned?

Milestone

What you learned – 你學到了什麼

你現在已經完成了前兩個SwiftUI項目,並且也完成了一個技術項目——兩個應用程式和一個技術項目的節奏將持續到課程結束,這將幫助你快速提升知識,同時花時間回顧和完善你所學的內容。

雖然我們在SwiftUI中只有三個項目,但您已經學到了一些最重要的概念:視圖、修飾符、狀態、堆棧布局等等——這些都是您在SwiftUI中一次又一次使用的技能,這就是為什麼我想早點把它們拿出來。

當然,您還構建了一些真實的項目,完成了許多編碼挑戰,以幫助鞏固您的學習,所以希望您感受一下您到底掌握了哪些內容。

到目前為止,我們已經涵蓋:

  • 構建將文本與Picker等控制項混合在一起的滾動表單,SwiftUI將其轉變為一個漂亮的基於表單的布局,滑動時新的列表項將會進入螢幕。
  • 創建一個NavigationView並給它一個標題。這不僅允許我們將新的視圖推到螢幕上,還允許我們設置標題,避免內容在時鐘下出現問題。
  • 如何使用@State來存儲不斷變化的數據,以及為什麼需要它。記住,我們所有的SwiftUI視圖都是結構體,這意味著沒有@State之類的東西就無法更改它們。
  • 為用戶介面控制項(如TextField和Picker)創建雙向綁定,學習如何使用$variable讓我們同時讀取和寫入值。
  • 使用ForEach在循環中創建視圖,這允許我們一次創建許多視圖。
  • 使用VStackHStackZStack構建複雜的布局,並將它們組合在一起形成網格。
  • 如何使用顏色和漸變作為視圖,包括如何為它們提供特定的Frame,以便您可以控制它們的大小。
  • 如何通過提供一些文本或圖片以及在點擊時應執行的閉包來創建按鈕
  • 通過定義顯示警報Alert的條件,然後從其他位置切換該狀態來創建警報
  • SwiftUI如何(以及為什麼)廣泛使用不透明的結果類型(some View),以及為什麼這與修飾符順序如此非常重要密切相關。
  • 如何使用三元運算符創建條件修飾符,根據程式狀態應用不同的結果。
  • 如何使用視圖組合自定義視圖修飾符將程式碼分解成小部分,從而使我們能夠在不丟失程式碼的情況下構建更複雜的程式。

有一件事我想讓你想想,視圖 view 在SwiftUI是什麼意思。在你開始這門課之前,你可能已經想到了「紅色Color.red」不可能是一個視圖,但,它是。您還看到了LinearGradient是一個視圖,這意味著它很容易在我們的布局中使用。

但是VStack呢?或者Group?或者ForEach?還有其他的那些View呢?

對!這些絕對都是SwiftUI中的視圖,正是這些視圖使得這個框架非常容易組合——我們可以將ForEach放在VStack中的一個Group中的ForEach中,然後它們都是有效的。

請記住,為了符合View協議,需要做的所有事情就是擁有一個名為body的計算屬性,該屬性返回some View

以前,我們在Swift中非常仔細地研究了協議、協議擴展和面向協議的編程,您可能想知道為什麼這一切如此重要。好吧,現在我希望您可以看到:View協議是SwiftUI的核心——任何東西都可以遵循它,並開始參與布局,只需幾行簡單的程式碼。

在其他用戶介面框架(包括蘋果自己的UIKit)中,類被用於這項工作。這意味著,如果您有一些現有的類型,並且希望將它們用於布局,則需要使它們從UIView繼承——這反過來意味著獲得200多個您可能不需要的屬性和方法,以及大量在幕後使用的其他功能。

在SwiftUI中,這一切都沒有發生:我們只是添加了一個View來適應。這就是協議和協議擴展的強大能力,這也是為什麼面向協議編程如此重要的原因——如果我們向我們自己的類型中添加一個單獨的body屬性,那麼SwiftUI知道如何使用它來進行布局和渲染。

現在,如果你注意的話,你可能會注意到一個奇怪的地方:當我們製作任何一種SwiftUI視圖時,我們需要讓它返回some View——我們製作一個視圖,它返回一個或多個其他視圖。這些視圖有自己的body屬性,反過來又返回視圖,而這些視圖也有自己的body屬性……好吧,你找到關鍵點了。

這看起來像是SwiftUI為自己構建了一個無限循環:如果所有視圖都是由其他視圖組成的,那麼它實際上在哪裡結束?

很明顯,它確實結束了,否則我們的SwiftUI程式碼都不會真正工作。訣竅在於蘋果稱之為原始視圖(primitive views)的東西,即SwiftUI的絕對裸構建塊,它符合View,但返回一些固定內容,而不是呈現其他類型的視圖。

有很多這樣的構建塊,它們不會帶來太多的驚喜——例如,文本Text、圖片Image、顏色Color和間隔符Spacer等都是一個構建塊。最終,我們構建的所有UI都是在這些構建塊之上創建的,這就打破了看似無限的循環。

譯自Milestone: Projects 1-3 What you learned