SwiftUI中Divider无法自适应父视图问题及布局优化求助

问题1：修复Divider导致父视图撑开的问题 #

在Form的HStack布局中，Divider默认会拉伸至父容器的垂直高度，进而导致HStack（及Form行）被意外撑开。你可以通过以下两种方式解决：

方法1：让Divider自适应内容高度 #

给Divider添加frame(maxHeight: .infinity)，使其仅填充HStack的实际内容高度（由其他子视图决定），而非强制撑开父视图：

Form {
    HStack(alignment: .top) {
        VStack(alignment: .trailing) {
            // 原有两个Picker代码
        }
        
        Divider()
            .frame(maxHeight: .infinity) // 匹配HStack的内容高度
            .padding(.vertical, 4) // 可选：给分割线上下添加间距，优化视觉
        
        Picker("Default Print Size:", selection: $viewModel.layoutParameters.printSize) {
            ForEach(PrintSize.allCases, id: \.self) {
                Text($0.description)
            }
        }
        .pickerStyle(.menu)
    }
}
.padding(8)

方法2：固定Divider高度 #

如果需要更精确的控制，直接设置Divider的高度与左侧VStack的内容高度匹配：

Divider()
    .frame(height: 60) // 调整为左侧两个Picker的总高度
    .alignmentGuide(.top) { $0[.top] } // 确保顶部对齐

问题2：移除显式padding，实现标签对齐 #

你无需手动设置padding(.leading, 15)，以下两种方法可以实现更优雅的标签对齐：

方法1：固定标签宽度 #

给两个Picker的标签设置统一的固定宽度，并设置右对齐，确保标签自动对齐：

VStack(alignment: .trailing) {
    Picker(selection: $viewModel.layoutParameters.paperSize) {
        ForEach(PrintSize.allCases, id: \.self) {
            Text($0.description)
        }
    } label: {
        Text("Paper Size:")
            .frame(width: 100, alignment: .trailing)
    }
    .pickerStyle(.menu)
            
    Picker(selection: $viewModel.layoutParameters.margin) {
        ForEach(Margin.allCases, id: \.self) {
            Text($0.description)
        }
    } label: {
        Text("Margins:")
            .frame(width: 100, alignment: .trailing)
    }
    .pickerStyle(.menu)
}

方法2：使用Grid布局（iOS 16+） #

利用Grid的自动列宽特性，让标签列宽度统一，实现原生对齐：

VStack(alignment: .trailing) {
    Grid(alignment: .trailing) {
        GridRow {
            Text("Paper Size:")
            Picker("", selection: $viewModel.layoutParameters.paperSize) {
                ForEach(PrintSize.allCases, id: \.self) {
                    Text($0.description)
                }
            }
            .pickerStyle(.menu)
        }
        GridRow {
            Text("Margins:")
            Picker("", selection: $viewModel.layoutParameters.margin) {
                ForEach(Margin.allCases, id: \.self) {
                    Text($0.description)
                }
            }
            .pickerStyle(.menu)
        }
    }
}

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