SwiftUI macOS表单同行放置多控件如何保持布局对齐

问题场景 #

我正在开发用于修改对象3D坐标的交互UI，希望参考macOS系统偏好设置中数字分隔符选项的布局形式，在前置标签后将X、Y、Z三个坐标输入控件放置在同一行，参考效果如下：

直接通过自定义HStack实现后整个表单的对齐出现错乱，不希望通过多层嵌套VStack、HStack的方式修正对齐问题，错乱效果如下：

原有问题代码 #

struct ObjectSettingsView: View {
    @State var object : Object
    
    var body : some View {
        Form {
            TextField("Name:", text: $object.name, prompt : Text("New Object"))
            Toggle(
                "Visible",
                isOn: $object.visible
            )
            Divider()
            HStack {
                Text("Coordinates:")
                NumberView(label : "X:", number : object.coordinates.x)
                NumberView(label : "Y:", number : object.coordinates.y)
                NumberView(label : "Z:", number : object.coordinates.z)
            }
        }
    }
}

struct NumberView : View{
    var label : String
    @State var number : Int32
    
    var body : some View {
        HStack {
            TextField(
                self.label,
                value: self.$number,
                formatter: NumberFormatter()
            )
            Stepper("", value: self.$number, in: 1...8)
                .labelsHidden()
        }
    }
}

注：实现时知晓本应使用ViewModel，当前仅为探究Form表单的工作机制。
核心诉求：实现同行多控件布局的同时保持表单整体对齐规范，找到无需大量嵌套Stack容器的标准实现方案。

解决方案 #

不需要多层嵌套Stack做对齐修正，使用SwiftUI原生LabeledContent组件即可完美适配Form的内置栅格对齐规则，这是苹果针对表单场景提供的标准实现，代码改动量极小。

修正后代码 #

1. 替换坐标行的自定义HStack为LabeledContent，自动接入表单标签对齐体系：

struct ObjectSettingsView: View {
    @State var object : Object
    
    var body : some View {
        Form {
            TextField("Name:", text: $object.name, prompt : Text("New Object"))
            Toggle("Visible", isOn: $object.visible)
            Divider()
            // LabeledContent标签自动和其他表单行标签列对齐
            LabeledContent("Coordinates:") {
                HStack(spacing: 12) {
                    NumberView(label: "X:", number: $object.coordinates.x)
                    NumberView(label: "Y:", number: $object.coordinates.y)
                    NumberView(label: "Z:", number: $object.coordinates.z)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        .formStyle(.grouped) // 匹配系统偏好设置的表单样式
    }
}

2. 修正NumberView的状态定义，原代码用本地@State会导致值无法同步回父视图，同时给输入框加固定宽度避免布局挤压：

struct NumberView : View{
    var label : String
    @Binding var number : Int32 // 改为双向绑定接收外部值
    
    var body : some View {
        HStack {
            TextField(
                self.label,
                value: self.$number,
                formatter: NumberFormatter()
            )
            .frame(width: 60) // 固定输入框宽度，和系统偏好设置布局一致
            Stepper("", value: self.$number, in: 1...8)
                .labelsHidden()
        }
    }
}

实现说明 #

• LabeledContent是SwiftUI 2.0+就提供的表单专用组件，在macOS端会自动匹配Form的两列栅格布局：左侧标签列和其他TextField、Toggle的标签自动对齐，右侧内容区可自由放置任意控件。
• 仅需要在内容区保留一个HStack排列三个坐标输入组即可，不需要额外嵌套容器做对齐修正，是最少代码量的原生实现。
• 给输入框设置固定宽度可以避免三个输入框因内容长度变化出现布局抖动，和系统偏好设置的多输入行布局逻辑完全一致。

如果需要兼容macOS 12及更早版本，可以使用Grid组件统一做两列布局，但LabeledContent是目前最轻量化、最符合系统设计规范的实现方案。

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