如何调整SwiftUI Grid中TextField与Stepper的布局以匹配Xcode样式

这是上一个问题《对齐TextField左侧》的后续提问。我尝试用SwiftUI的Grid组件模仿Xcode设置面板中的控件布局，目标效果如下：

目前已接近目标，但Widths行中HStack包裹的TextField和Stepper样式还不符合要求，当前效果如下（可忽略Picker中的选项值）：

请问如何修改代码，让这部分控件呈现出Xcode示例中的样式？

环境：macOS 15.6.1，Xcode 16.4

我的代码如下：

import SwiftUI

struct ContentView: View {
    enum Setting: String, CaseIterable {
        case one
        case two
        case three
    }

    @State private var unit: Setting = .one
    @State private var quantity1: Int = 4
    @State private var quantity2: Int = 4

    static let numberFormatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        return formatter
    }()

    var body: some View {
        ScrollView {
            Grid(horizontalSpacing: 5, verticalSpacing: 5) {
                GridRow {
                    Text("Text Encoding")
                        .font(.system(size: 11))
                        .gridColumnAlignment(.trailing)
                    Picker("", selection: $unit) {
                        ForEach(Setting.allCases, id: \.self) { unit in
                            Text(unit.rawValue)
                        }
                    }
                    .gridCellColumns(2)
                    .pickerStyle(.menu)
                    .controlSize(.small)
                }

                GridRow {
                    Text("Line Endings")
                        .font(.system(size: 11))
                        .gridColumnAlignment(.trailing)
                    Picker("", selection: $unit) {
                        ForEach(Setting.allCases, id: \.self) { unit in
                            Text(unit.rawValue)
                        }
                    }
                    .gridCellColumns(2)
                    .pickerStyle(.menu)
                    .controlSize(.small)
                }

                Divider()

                GridRow {
                    Text("Indent Using")
                        .font(.system(size: 11))
                        .gridColumnAlignment(.trailing)
                    Picker("", selection: $unit) {
                        ForEach(Setting.allCases, id: \.self) { unit in
                            Text(unit.rawValue)
                        }
                    }
                    .gridCellColumns(2)
                    .pickerStyle(.menu)
                    .controlSize(.small)
                }

                GridRow {
                    Text("Widths")
                        .font(.system(size: 11))
                        .gridColumnAlignment(.trailing)
                    
                    HStack {
                        TextField("", value: $quantity1, formatter: Self.numberFormatter)
                        Stepper("", value: $quantity1)
                    }
                    .controlSize(.small)
                    .font(.system(size: 11))

                    HStack {
                        TextField("", value: $quantity2, formatter: Self.numberFormatter)
                        Stepper("", value: $quantity2)
                    }
                    .controlSize(.small)
                    .font(.system(size: 11))
                }

                Divider()
            }
            .padding()
        }
    }
}

要匹配Xcode原生样式，需调整以下关键点：

• 消除TextField与Stepper的间距，让两者无缝贴合
• 给TextField设置固定宽度，保证布局一致性
• 使用Xcode风格的圆角边框文本框，同时让数字靠右对齐
• 启用紧凑步进器样式，贴合Xcode的紧凑设计
• 统一控件尺寸与字体，和其他Picker保持一致

修改后的Widths行代码如下：

GridRow {
    Text("Widths")
        .font(.system(size: 11))
        .gridColumnAlignment(.trailing)
    
    HStack(spacing: 0) {
        TextField("", value: $quantity1, formatter: Self.numberFormatter)
            .frame(width: 45)
            .textFieldStyle(.roundedBorder)
            .multilineTextAlignment(.trailing)
            .controlSize(.small)
        Stepper("", value: $quantity1)
            .stepperStyle(.compact)
            .controlSize(.small)
    }
    .font(.system(size: 11))

    HStack(spacing: 0) {
        TextField("", value: $quantity2, formatter: Self.numberFormatter)
            .frame(width: 45)
            .textFieldStyle(.roundedBorder)
            .multilineTextAlignment(.trailing)
            .controlSize(.small)
        Stepper("", value: $quantity2)
            .stepperStyle(.compact)
            .controlSize(.small)
    }
    .font(.system(size: 11))
}

另外，建议完善数字格式化器的配置，确保输入显示符合预期：

static let numberFormatter: NumberFormatter = {
    let formatter = NumberFormatter()
    formatter.numberStyle = .none
    formatter.minimumIntegerDigits = 1
    formatter.maximumIntegerDigits = 3
    return formatter
}()

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