SwiftUI 提供了多個表單控制元件，我們可以用來從使用者那取得輸入。 想像一下你 iPhone 上的「設定」應用程式。 那個應用程式可以使用我們即將看到的內建表單控制元件來建構，例如： TextField Toggle Picker 等等 所有這些將會被包裝在一個 Form 視圖中： Form { // 放置表單控制元件 } 這告訴 SwiftUI 這是一個表單，在執行的特定平台上（iPhone、Mac、Watch），SwiftUI 會將內容以符合表單外觀的方式呈現。 這是 SwiftUI 的聲明式特性的一部分。我們將表單控制元件包裝在 Form 視圖中，告訴它這是一個表單，然後它為我們做出決策。 我們將會藉由介紹每個個別的表單控制元件來更多地了解表單。
在 SwiftUI 中，DatePicker 表單控制元件讓我們可以創建一個…日期選擇器。 它是如何運作的呢？ 首先，我們創建一個 Date 型別的屬性： @State private var dateChosen = Date() 我們使用 @State 來讓我們能夠從 DatePicker 視圖中修改這個值。 然後，我們將這個屬性連接到 DatePicker 視圖： DatePicker(selection: $dateChosen, in: ...Date()) { Text("選擇日期和時間") } 它的外觀如下所示： 點擊不同的部分（日期或時間）將會顯示專用的選擇器界面元素： 以下是這個例子的完整程式碼： struct ContentView: View { @State private var dateChosen = Date() var body: some View { Form { DatePicker(selection: $dateChosen, in: ...Date()) { Text("選擇日期和時間") } } } } 你可以選擇只顯示日期的特定元素，使用 displayedComponents 屬性，例如只顯示日期： DatePicker(selection: $dateChosen, in: ...Date(), displayedComponents: .date) { Text("選擇日期和時間") } 或者只顯示時間：...
在 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 的視圖中使用 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....
在上一篇 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!") }