一、swiftUI基本筆記

1、狀態與動畫

過渡就像 Keynote 中的 Magic Move。你只需要設定狀態，SwiftUI 就會為你找出兩個狀態之間的過渡。

``` @State var show = true

.onTapGesture { self.show.toggle() } ```

2、動畫製作

SwiftUI 提供了多種動畫過渡效果。它們甚至具有自己的基於物理的內建函式，使你可以使用過沖效果以及將彈跳效果應用於動畫。

``` // Linear 直線 .animation(.linear)

// Ease Animation 動畫延遲 .animation(.easeInOut(duration: 0.3))

// Animation with Delay 動畫延遲 .animation(Animation.easeOut(duration: 0.6).delay(0.1))

// Spring 彈出 .animation(.spring()) ```

3、Stacks

如果你不熟悉 SwiftUI 中的堆疊，我建議你大量使用 Spacer。預設情況下，檢視佔用子元素的最小大小。這是我幫助你理解的影象。

這是我在 SwiftUI 中使用 Stacks 時學到的一些技巧。

``` // Stack views vertically and take full height 垂直堆疊檢視並取全高 VStack { Spacer() }

// Stack views horizontally and take full width 堆疊檢視水平和採取全寬度 HStack { Spacer() }

// Gap between views 檢視之間的差距 VStack(spacing: 20) {}

// Stack views on top of each other in a Z (depth) unit 在Z(深度)單元中，檢視之間相互堆疊 ZStack { VStack {} HStack {} }

// Take maximum width without Spacer() 取最大寬度 Spacer() .frame(minWidth: 0, maxWidth: .infinity)

// Align elements to the top left 將元素對齊到左上角 ZStack(alignment: .topLeading) {} ```

4、適用於所有裝置的 SwiftUI

SwiftUI 適用於 iPad，Mac，Apple TV 和 Watch。程式碼更改最少，你可以重用許多相同的元件。Stacks，Controls 和 Layout 系統將相同，但需要進行一些調整。SwiftUI 的理念不是一次編寫，到處適用（write once, apply everywhere），而是學習一次，隨處使用（learn one, apply anywhere）。 例如，模態視窗是自動與上下文相關，為你提供退場手勢併為你正確調整它們的大小。大多數控制元件和資料可在所有平臺上工作，並進行一些小的佈局更改和導航。這些控制元件將使用適合其特定平臺的介面自動為你翻譯。例如，一個選擇器（Picker）在 iOS 中看起來像一個列表，但在 Mac 中則看起來像一個下拉列表。

``` // All ZStack, VStack, HStack, TabView NavigationView, Picker, Stepper, Slider, etc. SF Symbols

// iPad / Mac TabView

// Mac Keyboard Shortcuts ```

5、拖放 UI

Views，Modifiers 和 Images 可以拖到 Preview 和程式碼中。你構建的所有內容都會自動轉換為生產程式碼。

在與 Preview 一樣的程式碼中，你可以使用 Command + 單擊 以獲取上下文選單，你可以在其中檢查元素並訪問許多有用的選項，例如 Embed in VStack 或 Extract to Subview。

6、Modifiers

你可以輕鬆地將 Modifiers 拖放到 Views 旁邊，並且可以使用新屬性（例如顏色，變換，視覺效果，內建控制元件和手勢）來增強它們。

.frame(width: 100, height: 100) .background(Color.blue) .shadow(radius: 10) .offset(x: 10, y:10) .blur() .padding()

7、SF Symbols

你需要從 Apple 下載最新的 San Francisco 字型才能開啟設計檔案。蘋果在其新的 SF Symbols 應用程式中提供了 1000 個圖示，可以在 Xcode 或設計工具中用作向量資產。

在 SwiftUI 中，你可以使用 SF Symbols 的名稱輕鬆生成圖示。確保下載該應用程式。此外，你可以自定義大小（小，中，大）並更改圖示顏色。

Image(systemName: item.icon) .imageScale(.large) .foregroundColor(.blue) .frame(width: 32, height: 32)

8、檢視和控制元件

你可以在 SwiftUI 中免費獲得在設計工具或更復雜的互動式控制元件（如 Toggle，Slider 和 Data Picker）中找到的基本元素。它們的樣式非常簡單，可以自定義功能和資料。

Text Image Rectangle Toggle Picker Stepper Slider

9、視覺效果

SwiftUI 免費為你提供了一堆視覺效果（Visual Effects），以便你可以使用它們。最重要的是，你甚至可以為它們設定動畫，它會很適合你！

.rotationEffect(Angle(degrees: 30)) .rotation3DEffect(Angle(degrees: 60), axis: (x: 0, y: 10, z: 0)) .scaleEffect(0.9) .blendMode(.hardLight) .blur(radius: 20)

10、UI 元件

就像在設計系統或 React 中一樣，你應該儘可能地將 UI 分解為元件（Components）。要建立新元件，請按 Command + 單擊 VStack 之類的容器，然後選擇 Extract to Subview。

VStack { Text("Card Back") } .frame(width: 340, height: 220.0)

通過編寫元件名稱來引用該元件。元件是檢視，即使沒有傳遞屬性也仍然可以接收其他 Modifiers！

CardView() .background(show ? Color.red : Color.blue) .cornerRadius(10)

11、實時預覽

SwiftUI 的有趣之處在於你所做的所有更改都是實時的，包括你使用的資料。除錯程式碼使你可以在 Swift UI 中快速測試資料和預覽環境。快速迭代確實非常強大。 你可以同時在多個裝置上預覽 SwiftUI 設計。你必須先對 Content Views 進行分組，然後才能進行預覽和資料設定。在這種情況下，我們使 Preview 視窗具有自適應性。最重要的是，你可以固定預覽，以便在更改程式碼時始終看到同一螢幕。

Group { ContentView() ContentView() .previewLayout(.sizeThatFits) // Preview components .environment(\.sizeCategory, .extraExtraExtraLarge) // Accessibility .previewDevice("iPhone 8") // Specific device }

12、黑暗模式

要在黑暗模式（Dark Mode）下預覽佈局，你需要在 Debug 區域的 Content View 中新增修飾符。請注意，為使你的設計在 Dark 模式下正常工作，應儘可能使用其預設顏色和控制元件，例如 Navigation View。

ContentView(courses: testData) .environment(\.colorScheme, .dark)

13、宣告式程式碼

在 SwiftUI 中，你將編寫較短的宣告式程式碼，因此，這全都在於告訴使用者介面應該做什麼。可讀性強，開門見山。

14、自動縮排程式碼

當你編輯程式碼時，它最終將變得難以閱讀，因此你可以在 Xcode 中使用 Re-Indent 保持所有內容的清潔。這有點類似於 Prettier，但是你必須選擇程式碼並按 Control + I。

15、舍入到最近畫素

SwiftUI 會為你調整畫素，以便你的檢視始終保持清晰。

16、Swift Packages

Swift現在具有一個軟體包管理器，可讓你輕鬆地從社群安裝第三方庫。要安裝庫，請轉到 Project Settings > Swift Packages。

17、鍵盤快捷鍵

最重要的 Xcode 鍵盤快捷鍵如下：

Cmd + 單擊：程式碼或 UI 的上下文選單。 Option + 單擊：程式碼快速資訊。 Cmd + 0：顯示/隱藏導航。 Cmd + Shift + L：插入新元素。 Cmd + R：執行應用程式。 Cmd + . ：停止應用程式。

18、教程

1、蘋果官方教程：（http://developer.apple.com/tutorials/swiftui/tutorials） 2、Paul Hudson 的 Hacking with Swift ：（http://www.hackingwithswift.com/quick-start/swiftui）

19、資源

在這麼短的時間內不可能涵蓋所有內容，因此重要的是要用很棒的資源繼續你的旅程。這是一個很好的清單。

20、資訊 1、iOS Dev Weekly （http://iosdevweekly.com/）

青山不改，綠水常流。謝謝大家！！！