SwiftUI表单Form
SwiftUI表单Form

SwiftUI表单Form

Form 是 SwiftUI 中用于构建表单视图的容器,自动提供了合理的分组间距、对齐方式、适配外观(尤其在 macOS/iOS 上行为不同)。它是许多 macOS 设置面板、用户输入界面最常用的构建方式之一。

基本结构示例

import SwiftUI

struct SettingsView: View {
    @State private var name: String = ""
    @State private var notificationsEnabled = true
    @State private var selectedColor = Color.blue

    var body: some View {
        Form {
            Section(header: Text("用户信息")) {
                TextField("用户名", text: $name)
            }

            Section(header: Text("设置")) {
                Toggle("启用通知", isOn: $notificationsEnabled)
                ColorPicker("主题颜色", selection: $selectedColor)
            }
        }
        .padding()
        .frame(width: 400)
    }
}

Form适用场景

1、macOS 设置页面:自动提供分组、标题、输入控件对齐。

2、输入信息收集界面:表单结构清晰,易于维护。

3、简单对话框或浮窗中的设置项:可配合 .formStyle() 改变外观。

4、复杂布局、非线性内容:Form 有默认行为,需用 VStack 自定义布局更灵活。

macOS 中的行为特点(区别 iOS)

1、不会自动使用卡片样式(不像 iOS 上那样有分组背景)。

2、不会嵌套滚动行为(需要手动用 ScrollView 包裹)。

3、支持 .formStyle(.grouped) 等样式控制(macOS 13+)。

样式可选项(macOS 13+):

.formStyle(.grouped)
.formStyle(.columns) // 适合多栏设置(类似系统设置)

注意事项

1、嵌套 Form 会出现渲染问题:通常不建议嵌套多个 Form。

2、在 macOS 中不自动滚动:如果内容过多,请使用 ScrollView 外包。

3、样式受系统控制较多:想要完全自定义边距/分割线可考虑不用 Form 而用 VStack + Divider 手动实现。

总结

Form 是 macOS 12+ SwiftUI 设置页面、偏好项首选容器。

在 macOS 上建议搭配 Section, Toggle, TextField, ColorPicker 等构建清晰设置界面。

若样式/滚动行为不满足需求,可自定义 VStack + Divider 替代。

相关文章

1、SwiftUI List和Form的分组视图Section:https://fangjunyu.com/2025/01/13/swiftui-list%e5%92%8cform%e7%9a%84%e5%88%86%e7%bb%84%e8%a7%86%e5%9b%besection/

2、SwiftUI列表格式化ListFormatStyle:https://fangjunyu.com/2024/12/24/swiftui%e5%88%97%e8%a1%a8%e6%a0%bc%e5%bc%8f%e5%8c%96listformatstyle/

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注