macOS Form和Section布局不对齐的问题

问题描述

在SwiftUI开发macOS时，发现使用Section的header显示的文字不是左对齐：

Form {
    Section(header:
        Text("Application")
            .font(.headline)
    ) {
        // 应用程序 - 功能模块
        VStack(alignment: .leading, spacing: 10) {

经过排查发现，当隐藏Slider控件，header的文本是左对齐的：

//    Slider(value: Binding(get: {
//        appStorage.imageCompressionRate
//    }, set: {newValue,_ in
//        appStorage.imageCompressionRate = newValue
//    }),in: 0.2...1,step: 0.2)

但是，只要恢复Slider控件的代码，hearder的文本就会根据Slider控件的纵轴显示对齐。

问题排查

在测试中发现，当我在Form外部创建一个Test时，文本是对齐的：

VStack {
    Text("Application")
        .font(.headline)
        .frame(maxWidth: .infinity, alignment: .leading)
    Form {
        Section(header:
            Text("Application")
                .font(.headline)
        ) {

当我把Form外部的Text拿到Form内后，跟Section的header一样，都是跟随Slider的位置对齐：

Form {
    Text("Application")     // 拿到 Form 内
        .font(.headline)
        .frame(maxWidth: .infinity, alignment: .leading)
    Section(header:
        Text("Application")
            .font(.headline)
    )

问题原因

Form 和 Section 在 SwiftUI 中是为 iOS 风格表单设计的。在 macOS 上虽然可以使用，但其内部布局逻辑较为僵化，它默认使用一种表单式对齐方式（Form-style alignment），将每一行控件对齐成“左边 label + 右边控件”的结构。这种布局会试图：

强制第一列（如 Text）和第二列（如 Slider、Picker）对齐。

Section(header:) 的 header 也被当作这类项目参与对齐。

因此，在Section代码中：

Section(header:
    Text("Application") // 这个 header 会被当成 Form 的一列
) {
    // HStack + Slider
}

SwiftUI 会尝试把 header 的位置和下方 Slider 对齐，这是 Form 在 macOS 上的对齐逻辑所致。

解决方案

Form 在 macOS 上可用性很差，建议改用VStack替代Form结构：

VStack(alignment: .leading) {
    Section(header:
        Text("Application")
            .font(.headline)
    ) {

不使用Form，可以通过VStack的alignment控制Setcion中的header文字，从而实现对布局的控制。