一、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、蘋果官方教程：（https://developer.apple.com/tutorials/swiftui/tutorials） 2、Paul Hudson 的 Hacking with Swift ：（https://www.hackingwithswift.com/quick-start/swiftui）

19、資源

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

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

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