macOS中Form搭配TextField显示不佳，自定义组件无效，能否自定义Form？

一、先修正你的自定义TextField问题 #

你之前的MacOSTextField用RoundedRectangle叠加TextField的方式存在层级和样式冲突，直接修改TextField原生样式更稳妥：

struct MacOSTextField: View{
    @Binding var text: String
    let displayText: String
    
    var body: some View{
        TextField(displayText, text: $text)
            .textFieldStyle(.plain) // 移除默认边框
            .padding(8)
            .background(
                RoundedRectangle(cornerRadius: 6)
                    .fill(Color(.textBackgroundColor))
                    .stroke(Color(.separatorColor), lineWidth: 1)
            ) // 模拟原生TextField的边框样式
    }
    
    init(_ displayText: String, text: Binding<String>) {
        self.displayText = displayText
        self._text = text
    }
}

二、自定义macOS的FormStyle #

SwiftUI支持为macOS自定义FormStyle，通过实现FormStyle协议可以完全定制Form的整体外观：

1. 实现自定义FormStyle协议 #

struct CustomMacFormStyle: FormStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(alignment: .leading, spacing: 16) {
            // 遍历Form中的所有Section
            ForEach(configuration.content) { section in
                SectionContainer(section: section)
            }
        }
        .padding(20)
        .background(Color(.windowBackgroundColor))
        .cornerRadius(10)
        .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 2)
    }
    
    // 自定义Section的容器样式
    private struct SectionContainer: View {
        let section: Configuration.Section
        
        var body: some View {
            VStack(alignment: .leading, spacing: 8) {
                // 渲染Section头部
                if let header = section.header {
                    header
                        .font(.headline)
                        .foregroundColor(.primary)
                }
                
                // 渲染Section内的所有行
                VStack(spacing: 8) {
                    ForEach(section.content) { row in
                        row
                            .padding(10)
                            .background(Color(.textBackgroundColor))
                            .cornerRadius(6)
                    }
                }
                
                // 渲染Section尾部
                if let footer = section.footer {
                    footer
                        .font(.caption)
                        .foregroundColor(.secondary)
                        .padding(.top, 4)
                }
            }
        }
    }
}

// 扩展FormStyle，方便调用自定义样式
extension FormStyle where Self == CustomMacFormStyle {
    static var customMac: CustomMacFormStyle { .init() }
}

2. 应用自定义FormStyle #

在macOS的Form中直接调用自定义样式即可：

struct NoteAppView: View {
    @State private var noteTitle = ""
    @State private var noteContent = ""
    
    var body: some View {
        Form {
            Section("笔记基本信息") {
                MacOSTextField("标题", text: $noteTitle)
                MacOSTextField("内容", text: $noteContent)
            }
        }
        .formStyle(.customMac) // 应用自定义样式
        .frame(width: 600, height: 400)
    }
}

三、额外优化建议 #

• 平台差异化适配：用#if os(macOS)做判断，仅在macOS端应用自定义样式，避免影响iOS的原生Form效果
• 原生控件封装：如果SwiftUI的TextField仍无法满足需求，可以通过NSViewRepresentable封装原生NSTextField，获得更精细的样式控制
• 间距调整：通过自定义容器的spacing参数，灵活控制Section、行之间的留白距离

内容的提问来源于stack exchange，提问作者Mr Clearmutes