在 SwiftUI 中，Form 是一个强大的容器组件，专门用于创建分组、结构化的表单界面。它是 SwiftUI 提供的标准表单控件，可以帮助快速构建包含输入字段、选择器、开关等常见控件的用户界面，特别适用于设置页面、用户信息编辑等场景。
1. 基本用法 #
Form 是一个非常类似于 List 的布局容器，但其专为表单设计，提供了更加整洁的分组显示和交互体验。
示例代码 #
import SwiftUI
struct BasicFormExample: View {
@State private var name = ""
@State private var age = 18
@State private var isSubscribed = false
var body: some View {
Form {
Section(header: Text("Personal Info")) {
TextField("Enter your name", text: $name) // 输入框
Stepper("Age: \(age)", value: $age, in: 0...100) // 步进器
}
Section(header: Text("Preferences"), footer: Text("Turn it on to receive updates.")) {
Toggle("Subscribe", isOn: $isSubscribed) // 开关
}
}
}
}
显示的界面包含： #
- 分组表单（分组通过
Section实现）。 - 输入字段： 用户可以在
TextField中输入姓名。 - 步进器：
Stepper允许用户调整年龄。 - 开关： 用户可以选择是否订阅。
关键点说明 #
Form：- 是一个容器，用于放置表单中的所有内容。
Section：- 将表单内容分为逻辑部分，每一部分可以有单独的 header（标题）和 footer（描述）文本。
- 表单内的控件直接绑定到状态变量（如
@State）上，实现双向数据绑定。
2. 高级用法：支持复杂控件 #
Form 可以容纳任何 SwiftUI 控件，因此它非常容易扩展。
示例代码：带复杂控件的表单 #
import SwiftUI
struct AdvancedFormExample: View {
@State private var selectedDate = Date() // 选中的日期
@State private var notificationsEnabled = true
@State private var preferredColor = Color.blue
var body: some View {
Form {
Section(header: Text("Settings")) {
DatePicker("Select Date", selection: $selectedDate, displayedComponents: .date)
Toggle("Enable Notifications", isOn: $notificationsEnabled)
ColorPicker("Preferred Color", selection: $preferredColor)
}
Section(header: Text("Preview")) {
HStack {
Circle()
.fill(preferredColor)
.frame(width: 50, height: 50)
Text("Your favorite color!")
.foregroundColor(preferredColor)
}
.padding()
}
}
}
}
效果 #
此表单包含：
- 日期选择器：
DatePicker让用户选择日期。 - 开关：
Toggle用于启用/禁用通知。 - 颜色选择器： 用户可以选择自定义的 UI 主题颜色，并在表单的实时预览中展示。
3. 表单分组和样式 #
Form 的分组由 Section 实现，每个 Section 可以有独立的标题或尾注。通过不同样式，可以增强它的表现力。
示例代码：分组和样式 #
import SwiftUI
struct StyledFormExample: View {
@State private var username = ""
@State private var isPrivate = false
var body: some View {
Form {
Section(header: Text("Account")) {
TextField("Username", text: $username)
Toggle("Private Account", isOn: $isPrivate)
}
Section(footer: Text("Your profile will be seen publicly if this is disabled.")) {
Button("Save Changes") {
print("Changes Saved")
}
.foregroundColor(.blue)
}
}
.navigationTitle("Edit Profile")
.navigationBarTitleDisplayMode(.inline)
}
}
效果说明 #
- Header 和 Footer：
Section(header: Text("Header"))定义标题。Section(footer: Text("Footer"))设置分组尾部描述。
- 按钮：
Button("Save Changes")添加交互功能，用于执行操作。
- 嵌入 Navigation：
- 在
Form界面中设置标题，与导航栏集成。
- 在
4. 自定义行样式 #
方法：修改单行样式 #
可以为 Form 中的具体行修改样式，包括背景、边框、间距等。
示例代码：单行样式 #
import SwiftUI
struct CustomRowExample: View {
@State private var favoriteFruit = "Apple"
let fruits = ["Apple", "Banana", "Orange", "Peach"]
var body: some View {
Form {
Section(header: Text("Select Your Favorite")) {
ForEach(fruits, id: \.self) { fruit in
HStack {
Text(fruit)
Spacer()
if fruit == favoriteFruit {
Image(systemName: "checkmark")
.foregroundColor(.blue)
}
}
.contentShape(Rectangle()) // 添加点击效果区域
.onTapGesture {
favoriteFruit = fruit
}
}
}
}
}
}
效果 #
- 用户可以选择喜欢的水果，当前选择的水果后会显示
Checkmark。 - 使用
onTapGesture()为单行添加手势交互。
方法：自定义整个 Form #
如果需要完全定制表单外观，可以使用 modifier 修改背景、间距等全局样式。
Form {
// 表单内容
}
.background(Color(.systemGroupedBackground)) // 更改背景色
.scrollContentBackground(.hidden) // 隐藏系统滚动背景（iOS 16+）
5. 用 Form 构建复杂场景 #
Form 常用于设置页面、表单界面的构建场景。以下是典型的使用案例：
案例 1：配置页面 #
Form {
Section(header: Text("General Settings")) {
Toggle("Wi-Fi", isOn: .constant(true))
Toggle("Bluetooth", isOn: .constant(false))
}
Section(header: Text("Account")) {
HStack {
Text("Apple ID")
Spacer()
Text("example@icloud.com").foregroundColor(.gray)
}
NavigationLink("Manage Subscriptions", destination: Text("Subscriptions Page"))
}
}
案例 2：注册表单 #
Form {
Section(header: Text("Sign Up")) {
TextField("Email", text: .constant(""))
SecureField("Password", text: .constant(""))
Button("Register") {
print("Register button tapped")
}
}
}
6. 特殊注意事项 #
无法设置 Row 间距（iOS 16 以下）：
Form在 iOS 16 之前并不支持内置的rowSpacing，如果需要修改间距，可以通过padding来管理控件内的间距。
滚动背景：
- iOS 16+ 支持
.scrollContentBackground(.hidden)来隐藏表单的滚动背景。
- iOS 16+ 支持
总结 #
Form 是 SwiftUI 专门为表单设计的强大容器，在设置页面和多交互输入场景中非常有用。关键特性如下：
- 分组支持： 使用
Section将表单内容逻辑分组。 - 多控件集成： 支持
TextField、Picker、DatePicker、Stepper、Toggle等丰富的控件。 - 高度可定制： 可通过手势、样式或自定义 View 添加特定需求。
- 易与 Navigation 集成： 适用于现代的表单交互设计。
如果你正在设计一个应用中的表单或设置页面，Form 将是非常高效和直观的工具！