SwiftUI表单添加.switchStyle后元素水平对齐异常问题咨询

在开发macOS测试项目时，遇到以下布局问题：未为Toggle设置样式时显示正常，添加.switchStyle(.switch)后，表单内所有行的内容都会与Switch的起始位置对齐，导致左侧文本被挤压偏移。尝试用Group、VStack包裹元素无法解决该问题。

问题代码 #

import SwiftUI
import Foundation

let serverNameList = ["HTTP Server", "Test", "IOT", "Messenger"]

struct ContentView: View {
    @State private var companiesExpanded = true
    @State private var isHTTPServerOn = true
    
    var body: some View {
        VStack {
            let serverImage = Image(systemName: "globe")
                .padding(10.0)
                .imageScale(.large)
                .foregroundStyle(.tint)
            
            NavigationSplitView {
                DisclosureGroup(isExpanded: $companiesExpanded) {
                    ForEach(serverNameList, id: \.self) { serverName in
                        NavigationLink(destination: Text("目标页面")) {
                            Label {
                                Text(serverName)
                            } icon: {
                                Image(systemName: "server.rack")
                                    .foregroundStyle(Color.blue)
                            }
                            .frame(minWidth: 100, idealWidth: 200, maxWidth: 300, alignment: .leading)
                            .padding(5)
                        }
                        .buttonStyle(PlainButtonStyle())
                        .navigationSubtitle("副标题")
                    }
                } label: {
                    Text("服务器")
                        .font(.subheadline)
                        .fontWeight(.semibold)
                }
                .padding(.horizontal, 10)
                .frame(minWidth: 120, idealWidth: 180, maxWidth: 350, minHeight: 120, idealHeight: 300, alignment: .top)
                Spacer()
            } detail: {
                VStack(alignment: .leading) {
                    HStack(alignment: .top) {
                        // 表单1
                        Form {
                            HStack {
                                Text("名称")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("HTTP Server")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("版本")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("0.13.2")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("状态")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                HStack {
                                    Image(systemName: "circle.fill")
                                        .foregroundStyle(Color.green)
                                        .frame(width: 8, height: 8, alignment: .center)
                                    Text("在线")
                                }
                                .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("域名")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("IPv4")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("连接数")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("6")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("所有者")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("Max Mustermann")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                        }
                        .padding(10)
                        .frame(minWidth: 260, idealWidth: 300, maxWidth: 370, minHeight: 210, idealHeight: 240, maxHeight: 300, alignment: .topLeading)
                        .overlay(RoundedRectangle(cornerRadius: 6)
                            .stroke(Color.black.opacity(0.1), lineWidth: 1))
                        
                        // 表单2（存在问题的表单）
                        Form {
                            HStack {
                                Text(isHTTPServerOn ? "关闭" : "开启")
                                Toggle("", isOn: $isHTTPServerOn)
                                    .toggleStyle(.switch)
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("版本")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("0.13.2")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("状态")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                HStack {
                                    Image(systemName: "circle.fill")
                                        .foregroundStyle(Color.green)
                                        .frame(width: 8, height: 8, alignment: .center)
                                    Text("在线")
                                }
                                .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("域名")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("IPv4")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("连接数")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("6")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                            Divider()
                            HStack {
                                Text("所有者")
                                    .frame(minWidth: 100, idealWidth: 100, maxWidth: 150, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .leading)
                                Text("Max Mustermann")
                                    .frame(minWidth: 120, idealWidth: 200, maxWidth: 220, minHeight: 25, idealHeight: 30, maxHeight: 40, alignment: .trailing)
                            }
                        }
                        .padding(10)
                        .frame(minWidth: 260, idealWidth: 300, maxWidth: 370, minHeight: 210, idealHeight: 240, maxHeight: 300, alignment: .topLeading)
                        .overlay(RoundedRectangle(cornerRadius: 6)
                            .stroke(Color.black.opacity(0.1), lineWidth: 1))
                    }
                }
                .padding(1)
                .frame(minWidth: 4 * 10 + 220 + 2, idealWidth: 3*(300+2), maxWidth: .infinity, minHeight: 1*(210+2), idealHeight: 3*(240+2), maxHeight: .infinity, alignment: .topLeading)
            }
        }
    }
}

#Preview {
    ContentView()
}

效果对比 #

• 预期布局效果：
  

• 实际布局效果：
  

• 布局细节标注：
  

解决方案 #

macOS的Form组件会自动为包含Switch样式Toggle的行设置特殊对齐规则，导致所有行内容偏移。可通过以下两种方式修复：

方式1：手动设置对齐基准

为包含Toggle的HStack添加.alignmentGuide(.leading)，强制其使用自身左侧边缘作为对齐基准，抵消Form的自动对齐：

HStack {
    Text(isHTTPServerOn ? "关闭" : "开启")
        .frame(minWidth: 100, alignment: .leading)
    Spacer()
    Toggle("", isOn: $isHTTPServerOn)
        .toggleStyle(.switch)
}
.alignmentGuide(.leading) { dimension in
    dimension[.leading]
}

方式2：使用Form原生行结构

放弃手动嵌套HStack，改用Form原生的Toggle行结构，让Form自动处理布局：

Toggle(isOn: $isHTTPServerOn) {
    Text(isHTTPServerOn ? "关闭" : "开启")
}
.toggleStyle(.switch)

说明 #

两种方式都能解决布局偏移问题：方式1适合保留自定义HStack布局的场景，方式2更贴合SwiftUI Form的原生设计，代码更简洁。

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