在表單中，我們可以使用 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 的值。...
給定一個表單，你如何獲取其中一個表單字段的值？ 一個常見的情境是，當你有一個表單時，你想要獲取其中一個表單字段的值，例如當用戶點擊一個按鈕時。 你可以如何實現這個功能？ 使用React的hooks，你可以為每個輸入字段創建一個變量，在onChange事件上監聽並調用相應變量的 “set” 函數。 以下是一個示例： const [title, setTitle] = useState('') 在JSX中的輸入字段： <input onChange={event => setTitle(event.target.value)} /> 這樣，當你在表單的提交事件處理程序中，或者任何你希望的地方，你都可以從 title 變量中獲取字段的值。
網頁上常見的一個需求是將表單重置為初始狀態。 過去很多表單上都有一個“重置”按鈕，不過現在我看到它的使用越來越少。 重置按鈕是一個 input 元素，其 type 屬性設置為 “reset”： <input type="reset"> 你也可以使用 JavaScript 來以編程的方式重置表單。 你只需要獲取表單元素的引用： const form = document.querySelector('form') 然後你可以在該引用上調用 reset() 方法： form.reset() 這將清空表單中的所有元素，將它們恢復為初始狀態。