在 TextField 和 Toggle 之後，另一個常見的表單控件是 Picker。它允許我們在一系列可選項中進行選擇。 首先，我們需要有一個包含選項列表的數組： var cities = ["Rome", "Milan", "Venice", "Florence"] 然後，我們需要一個屬性來存儲所選擇的選項。我們使用 @State 對其進行封裝，因為它是基於用戶輸入而變化的內容： @State private var selected = "Rome" 最後，我們使用 Picker 視圖。我們傳遞 2 個參數。第一個是標籤，第二個是用於所選項的屬性，在閉包中，我們使用 ForEach 視圖 為每個不同的選項添加一個文本視圖： Picker("What's your favorite city?", selection: $selected) { ForEach(cities, id: \.self) { Text($0) } } 這是我們的 ContentView 的完整代碼： struct ContentView: View { var cities = ["Rome", "Milan", "Venice", "Florence"] @State private var selected = "Rome" var body: some View { Form { Picker("What's your favorite city?...

在表單中，我們可以使用 Stepper 視圖，它可以讓我們選擇一個數字並提供 - 和 + 按鈕來進行減少或增加。 我們使用 @State 屬性包裝器將它與屬性的值綁定在一起，這裡以 counter 為例： struct ContentView: View { @State private var counter = 0 var body: some View { Form { Stepper("The counter is \(counter)", value: $counter) } } } 您可以使用 Stepper 的 in 參數來限制它可以接受的值的範圍： Stepper("The counter is \(counter)", value: $counter, in: 0...10) 當您達到限制時，增加或減少數字的控制元件將變為灰色且無法互動。

我們將看到的第一個表單控制項是最簡單的：TextField。 這個控制項可以像 Text 視圖一樣顯示一些文字，並且可以由用戶進行編輯，因此我們可以獲得文本形式的輸入。 下面是 TextField 的最基本示例： struct ContentView: View { @State private var name = "" var body: some View { Form { TextField("", text: $name) } } } 我們在前面加上了 @State 屬性封裝器 的 SwiftUI 屬性。 運行這段代碼，你會看到一個空的文字框。你可以點擊它： 然後，你可以在其中輸入任意的文本： TextField 的第一個參數是在字段為空時可視化的字符串。你可以填寫任何你想要的文本，像這樣： TextField("您的名稱", text: $name)

另一個常見的表單控制元件是 Toggle。 在設定應用程式中，你可以看到它被廣泛使用。 struct ContentView: View { @State private var enabled = true var body: some View { Form { Toggle("是否啟用？", isOn: $enabled) } } } 它與 TextField 視圖類似，除了我們不是使用 text 參數傳遞一個 String 值，而是使用 isOn 傳遞一個 Bool 值。 如果將它設置為 true，則開關將啟用；如果設置為 false，則將被禁用。 當然，用戶可以通過點擊控制元件來啟用或禁用它，這會自動更新傳遞到 isOn 的變量。

在 SwiftUI 中，Slider 是一個表單控制元件，讓使用者可以左右滑動來增加或減少其值。 我們可以透過設定三個參數來初始化一個 Slider：value、in、step： @State private var age: Double = 0 //... Slider(value: $age, in: 0...100, step: 1) in 參數用於限制可以使用的最小值和最大值。 step 參數代表每次可以增加或減少的數值，例如這裡設定為 1，表示我們可以從 0 開始，每次增加 1，依次類推。你也可以使用其他的數值，例如 10 或 0.2。 由於 Slider 使用 Double 值，預設會出現小數位數。 範例程式碼如下： struct ContentView: View { @State private var age: Double = 0 var body: some View { Form { Slider(value: $age, in: 0...100, step: 1) Text("\(age)") } } } 請注意我加入了一個 Text 視圖來顯示 age 的值。...

在上一篇 SwiftUI 的教程中，我提到了如何使用 stack 來排列視圖： VStack { Text("Hello World") Text("Hello again!") } 讓我們來談談間距。 注意兩個 Text 視圖之間沒有間距嗎？這是因為 VStack 的默認行為。 VStack 可以接受一個 spacing 參數： VStack(spacing: 100) { Text("Hello World") Text("Hello again!") } 這將在 VStack 中的視圖之間增加 100 個點的間距。 你也可以使用 Spacer 視圖： VStack { Text("Hello World") Spacer() Text("Hello again!") } Spacer 會填滿所有可用的空間： 你可以使用 frame() 修改器來限制 Spacer 的寬度： VStack { Text("Hello World") Spacer() .frame(height: 20) Text("Hello again!") }

你可以在 SwiftUI 的視圖中使用 Image 視圖顯示圖片。 首先，你需要將圖片添加到 Xcode 項目導航器中的 Assets.xcassets 檔案中的一個新圖片集中。 然後，你可以像這樣將圖片添加到你的 ContentView 中： import SwiftUI struct ContentView: View { var body: some View { Image("Avatar") } } 你也可以使用 Image(systemName:) 的格式顯示系統圖片： struct ContentView: View { var body: some View { Image(systemName: "house") } } Image 視圖有一系列的修飾器可供使用，包括： .resizable() 用於調整圖片大小以適應 .frame() 的尺寸 .frame() 用於設置寬度/高度 .clipShape() 用於設置裁剪形狀 .border() 用於設置邊框顏色 .overlay() 用於將另一個視圖放在其前面 .aspectRatio() 用於設置長寬比 .clipped() 用於裁剪超出框架的圖片 示例：

在 SwiftUI 簡介 文章中，我提到了視圖。 SwiftUI 就是關於視圖的。 還記得 Hello World 應用程式嗎？ import SwiftUI struct ContentView: View { var body: some View { Text("Hello World") } } ContentView 是主要的視圖。它的工作是定義構成我們應用程式的視圖。 在這裡，我們只有一個視圖，Text。 如果你在 Xcode 中運行這段程式碼，應用程式會如下所示： 注意在 ContentView 結構後面的額外程式碼：這是告訴 Xcode 在右側的預覽面板中要顯示什麼的方式。這不是應用程式的一部分，但在開發中會用到。 視圖可以有修飾器。 以下是 Text 視圖的一個修飾器範例：font()。 struct ContentView: View { var body: some View { Text("Hello World") .font(.largeTitle) } } 這個修飾器接受我們創建的 Text 視圖並使字體變大： 不同的視圖可以有不同的修飾器。 到目前為止，我們只看到了 Text 視圖，這個視圖有許多你可以使用的修飾器，其中包括： font() 設定視圖中文字的默認字體 background() 設定視圖的背景 foregroundColor() 設定視圖顯示的前景元素的顏色 padding() 在視圖四邊添加填充 ⋯還有許多其他的修飾器。對於 Text 視圖，你可以在這個頁面查看所有可以使用的修飾器：https://developer....

Button視圖可用於顯示互動式按鈕元素。 我們可以這樣聲明它： Button("按鈕標籤") { // 當點擊時執行的操作 } 或者這樣聲明： Button { // 當點擊時執行的操作 } label: { Text("按鈕標籤") } 第二種方式在按鈕的標籤中有其他內容，而不僅僅是文本時比較常用，例如圖像。 讓我們在一個SwtiUI程序中使用第一種方式： struct ContentView: View { var body: some View { Button("測試") { } .font(.title) } } 看到了吧？應用程序中有一個藍色文本，你可以點擊它。它是互動式的。 由於我們沒有告訴它在點擊時做什麼，所以它沒有任何操作。 我們可以在調試控制台中打印一些內容： struct ContentView: View { var body: some View { Button("測試") { print("測試") } .font(.title) } } 請注意，這僅在運行應用程序時才起作用，Xcode的預覽中不起作用。 現在我們可以為我們的應用程序添加另一個步驟。我們將在按鈕標籤中打印一個屬性值： struct ContentView: View { var count = 0 var body: some View { Button("計數：\(count)") { } ....

在 SwiftUI 中，ForEach 視圖非常有用，可以遍歷數組或範圍，並生成我們可以使用的視圖。 例如，我們在此創建了3個 Text 視圖，顯示從0到2的數字： ForEach(0..<3) { Text("\($0)") } $0 表示傳遞給閉包的第一個參數，在這個例子中分別是數字 0、1 和 2。 在這個例子中，為了避免重疊，我將它們嵌入到了一個 VStack 中： VStack { ForEach(0..<3) { Text("\($0)") }.padding() } 注意我使用了 padding() 修改器來添加一些間距。 在 List 視圖中，通常使用 ForEach： List { ForEach(0..<3) { Text("\($0)") } } 這是一種常見的用法，以至於我們實際上可以省略 ForEach，直接從 List 中遍歷： List(0..<3) { Text("\($0)") } 這兩個示例使用了範圍 0..<3。我們也可以遍歷數組： let fruits = ["Apple", "Pear", "Orange"] // ... List { ForEach(fruits, id: \.self) { Text("\($0)") } } 請注意，這種情況下我們有另外一個參數：id。 這是為了唯一識別數組中的項目。 對於內置類型，使用 \....