14.表单视图

表单视图在 iOS 应用程序中是一种常见的用户界面组件，可以用于收集用户的输入或设置应用程序的选项。在 SwiftUI 中，表单视图是通过一个名为 Form 的容器视图来实现的，它提供了许多内置的表单元素，如文本字段、开关、选择器等。

创建表单视图

要创建一个表单视图，我们只需将所有表单元素放入 Form 容器中即可。以下是一个简单的示例：

struct ContentView: View {
    var body: some View {
        Form {
            Text("Hello, World!")
            TextField("Enter your name", text: .constant(""))
            Toggle("Show advanced options", isOn: .constant(false))
            Button("Submit") {
                // Submit the form
            }
        }
    }
}

在这个例子中，我们使用了一些常见的表单元素，如文本、文本字段、开关和按钮。在这里，我们没有为表单元素提供任何处理程序或绑定，因此它们只是静态的元素。在实际应用程序中，你可能需要为表单元素提供更多的自定义处理程序和绑定，以响应用户的输入。

表单元素

文本字段

文本字段是表单视图中最常用的元素之一，它允许用户输入文本并将其提交给应用程序。SwiftUI可以使用 TextField 元素来创建文本字段，如下所示：

struct ContentView: View {
    @State private var name: String = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
        }
    }
}

使用 TextField 元素创建了一个文本字段，并将其绑定到一个名为 name 的状态变量。每当用户在文本字段中输入文本时，该变量的值将被更新。

开关

开关是表单视图中另一个常见的元素，它允许用户在两个选项之间进行选择。SwiftUI可以使用 Toggle 元素来创建开关，如下所示：

struct ContentView: View {
    @State private var showAdvancedOptions: Bool = false

    var body: some View {
        Form {
            Toggle("Show advanced options", isOn: $showAdvancedOptions)
        }
    }
}

使用 Toggle 元素创建了一个开关，并将其绑定到一个名为 showAdvancedOptions 的状态变量。每当用户切换开关时，该变量的值将被更新

选择器

选择器允许用户从多个选项中进行选择。在 SwiftUI 中，我们可以使用 Picker 元素来创建选择器，如下所示：

struct ContentView: View {
    let options = ["Option 1", "Option 2", "Option 3"]
    @State private var selectedOption = 0

    var body: some View {
        Form {
            Picker("Select an option", selection: $selectedOption) {
                ForEach(0 ..< options.count) {
                    Text(self.options[$0])
                }
            }
        }
    }
}

使用 Picker 元素创建了一个选择器，并将其绑定到一个名为 selectedOption 的状态变量。还使用 ForEach 构造函数来动态生成 Picker 中的选项，每个选项都由一个 Text 元素表示。

按钮

按钮是表单视图中的另一个常见元素，它允许用户执行操作或提交表单。在 SwiftUI 中，我们可以使用 Button 元素来创建按钮，如下所示：

struct ContentView: View {
    @State private var name: String = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
            Button("Submit") {
                // Submit the form
            }
        }
    }
}

使用 Button 元素创建了一个按钮，并为其提供了一个名称和一个处理程序。当用户点击该按钮时，处理程序将被调用。