SwiftUI 中的 Form：它是什么，如何创建表单和配置
SwiftUI 中的 Form 是一个容器组件，用于构建结构化的设置和数据输入界面，遵循 iOS 中 Settings 的设计。该组件自动将控件按系统间距和样式分组到区块中，使开发者无需手动校准分隔线和颜色。根据 Apple Developer Documentation (2025)，Form 会针对每个平台调整外观——从 iOS 上的 grouped 表格到 macOS 上的标准列表——同时保持统一的 API。
要点
- Form — SwiftUI 中用于 Settings 风格界面的容器，自动对元素进行分组
- Section 在 Form 内创建带标题和页脚的逻辑区块
- Picker、Toggle、TextField 会自动获得与平台匹配的样式
- 间距和分隔线由系统管理，无需手动配置
- NavigationLink 允许创建可跳转到子屏幕的分层表单
SwiftUI 中的 Form 是什么？
Form 是 SwiftUI 的专用容器，用于创建数据输入表单和设置屏幕。它继承了 List 的行为，但增加了平台样式：在 iOS 上，Form 显示为带区块圆角的 grouped 表格；在 macOS 上，则显示为标准系统列表，带有复选框和控件。
与使用 VStack 和 HStack 的手动布局不同，Form 会自动分配元素之间的间距、添加分隔线，并使外观适配系统主题——浅色或深色。开发者只需描述逻辑结构：用于分组的 Section 及其内部的控件。表单自身决定在特定平台上如何直观地放置 Picker、Toggle 或 Stepper。
Form 支持所有标准的 SwiftUI 输入元素：文本用 TextField、密码用 SecureField、从列表选择用 Picker、开/关用 Toggle、范围用 Slider、步进值用 Stepper、日期用 DatePicker。每个元素都会自动获得符合目标平台上 Apple 的 HIG（Human Interface Guidelines） 的样式。
Form 与 List：容器对比
尽管外观相似，Form 和 List 解决的问题不同。List 是用于显示可滚动数据列表的通用容器，支持滑动操作和行编辑。Form 是用于 数据输入和设置的专用容器，针对控件的系统样式进行了优化。
List 适合显示动态数据：新闻流、聊天、商品目录。Form 适合具有可预测字段集的静态屏幕：用户资料、应用设置、注册表单。关键区别：Form 的元素可以是交互式控件，而 List 的行大多显示数据，并对点击以导航或操作作出响应。
| 参数 | Form | List |
|---|---|---|
| 用途 | 数据输入、设置 | 显示列表 |
| 区块样式 | Grouped（iOS）、系统（macOS） | Plain 或 Grouped |
| 控件 | Picker、Toggle、Slider、Stepper | 有限（按钮） |
| 动态数据 | 有限（Section 中的 ForEach） | 完全支持 |
| 滑动操作 | 是，swipeActions | 是，swipeActions |
根据 Apple Human Interface Guidelines (2025)，Form 应用于设置和输入屏幕，其中单屏包含 3 到 20 个控件，并且按区块分组可改善感知。
Form 中的 Section 区块
Section 是 Form 的主要构建块，允许对逻辑相关的元素进行分组。每个 Section 都可以包含标题、页脚和任意数量的控件。系统会自动添加区块之间的间距，并将每个区块包裹在带圆角的视觉块中。
使用 Section 对于表单的可读性至关重要：按含义分组的元素更容易被用户理解。例如，在个人资料设置屏幕上，可以将"个人资料"、"通知"和"安全"拆分为单独的区块。每个区块都可以包含带解释文字的页脚，系统会在元素组下方以较小的字体显示该文字。
swift
Form {
Section(header: Text("个人资料")) {
TextField("姓名", text: $name)
TextField("Email", text: $email)
}
Section(header: Text("通知"),
footer: Text("会议期间关闭")) {
Toggle("Push notifications", isOn: $pushEnabled)
Toggle("Email notifications", isOn: $emailEnabled)
}
}在示例中，第一个区块"Profile"包含两个无页脚的文本字段，第二个区块"Notifications"包含两个开关，并在组下方有说明。页脚会自动添加间距并使用 caption 字体样式。Section 可以包含无标题的页脚或无页脚的标题。
Form 中的控件
Form 支持所有标准的 SwiftUI 输入元素。Picker 在 Form 中会自动显示为导航行，在 iOS 上可跳转到单独的选择屏幕。Toggle 显示为带开关的行，开关靠右对齐。TextField 获得带占位符的系统输入样式。
对于数值，使用 Stepper（步进更改）和 Slider（在范围内平滑更改）。DatePicker 支持多种模式：date、time、dateAndTime。颜色选择可使用 ColorPicker。每个元素无需额外代码即可适配平台——在 iOS 上控件使用 UIKit 的原生样式，在 macOS 上使用 AppKit。
| 元素 | 用途 | Form 中的样式 |
|---|---|---|
| TextField | 文本输入 | 带占位符的行 |
| SecureField | 密码输入 | 带隐藏字符的行 |
| Picker | 从列表选择 | 指向选择屏幕的 NavigationLink |
| Toggle | 开/关 | 带开关的行 |
| Slider | 值范围 | 水平滑块 |
| DatePicker | 选择日期/时间 | 紧凑或滚轮样式 |
对于 Form 内的自定义控件，可以使用任何 SwiftUI View——它们继承区块的标准行为。不过，建议坚持使用系统元素，因为它们能保证符合 HIG，并无需额外配置即可支持无障碍功能（VoiceOver、Dynamic Type）。
Form 代码示例
我们来介绍使用 Form 创建注册屏幕。表单包含四个区块：个人资料、选择角色、订阅设置和提交按钮。使用 Section 进行分组，并使用标准的 SwiftUI 控件。
swift
struct RegistrationForm: View {
@State private var name = ""
@State private var email = ""
@State private var role = "Developer"
@State private var agreedToTerms = false
let roles = ["Developer", "Designer", "Manager"]
var body: some View {
NavigationStack {
Form {
Section(header: Text("个人信息")) {
TextField("Name", text: $name)
TextField("Email", text: $email)
.keyboardType(.emailAddress)
}
Section(header: Text("角色")) {
Picker("Select role", selection: $role) {
ForEach(roles, id: \.self) { role in
Text(role).tag(role)
}
}
}
Section {
Toggle("Agree to terms", isOn: $agreedToTerms)
}
Section {
Button("注册") {
submitForm()
}
.disabled(!agreedToTerms)
}
}
.navigationTitle("Registration")
}
}
private func submitForm() { }
}表单分为四个 Section：带两个文本字段的个人资料、通过 Picker 选择角色、通过 Toggle 同意条款以及注册按钮。在用户同意条款之前，按钮处于禁用状态——这是 Form 内验证的一个例子。NavigationStack 添加标题，并允许 Picker 在 iOS 上打开单独的选择屏幕。
带子区块的设置表单
swift
struct SettingsForm: View {
@State private var volume: Double = 0.5
@State private var isDarkMode = false
@State private var reminderDate = Date()
var body: some View {
NavigationStack {
Form {
Section(header: Text("外观")) {
Toggle("Dark mode", isOn: $isDarkMode)
Slider(value: $volume, in: 0...1) {
Text("音量")
}
}
Section(header: Text("提醒"),
footer: Text("您将在所选时间收到通知")) {
DatePicker("Remind at",
selection: $reminderDate,
displayedComponents: .hourAndMinute)
}
Section {
NavigationLink("Advanced Settings",
destination: AdvancedSettingsView())
}
}
.navigationTitle("Settings")
}
}
}此示例展示了 Form 中 Slider、DatePicker 和 NavigationLink 的组合。DatePicker 使用 hourAndMinute 模式只显示时间。最后区块中的 NavigationLink 会跳转到高级设置屏幕——这是 Settings 风格界面的常见模式。区块的标题和页脚使表单具有自文档性：用户立即明白每个控件属于哪个组。
常见问题
SwiftUI 中 Form 和 List 有什么区别？
Form 针对数据输入和设置进行了优化：控件获得系统样式，区块获得圆角和间距。List 是用于显示数据的通用容器。Form 适合设置屏幕，List 适合聊天、信息流和目录。
可以在 Form 中使用 Picker 吗？
可以，Form 中的 Picker 会自动显示为带所选值的行，并在 iOS 上提供用于从列表选择的 NavigationLink。在 macOS 上，Picker 根据样式显示为下拉列表或单选按钮组。适配无需额外代码即可实现。
如何向 Form 添加自定义 View？
任何 SwiftUI View 都可以放在 Form 或 Section 中。对于自定义控件，建议继承区块的标准间距，并通过系统字体支持Dynamic Type。避免固定的大小和颜色，以确保表单在所有设备上都能正确显示。
Form 支持滚动吗？
是的，如果内容超过屏幕高度，Form 会自动包裹在 ScrollView 中。无需手动添加 ScrollView——系统自己会判断是否需要滚动。对于不应滚动的表单，请使用固定高度的 VStack。
如何更改 iOS 上 Form 的样式？
iOS 上的 Form 通过 .formStyle(.grouped) 修饰符支持两种样式——带圆角区块的标准 grouped 外观。macOS 可使用 .formStyle(.columns) 实现多列布局。样式会一次性应用于整个 Form，并改变内部所有元素的视觉呈现。
结论
- Form — 用于 Settings 风格界面的 SwiftUI 容器，通过 Section 自动分组
- Section 通过标题和页脚实现元素的逻辑划分
- Picker、Toggle、TextField 无需手动配置即可自动适配平台样式
- 间距和分隔线由系统管理，符合每个平台上的 Apple HIG
- NavigationLink 在 Form 内创建分层导航——设置屏幕的标准做法
- Form 支持所有 SwiftUI 输入元素：Slider、Stepper、DatePicker、ColorPicker
- 使用 Form 用于设置和输入屏幕，使用 List 用于显示动态数据列表
我们将开发一款交钥匙移动应用程序
IT Sectr自2017年以来为初创企业和企业打造iOS和Android应用程序。我们将为您提供咨询并提出最佳解决方案。
另请阅读