如何获取listRowInsets实现Form中列表行无缝边缘适配？

我正在创建一个包含Button和Picker的HStack视图并嵌入Form中，需要让Button与列表行边缘无缝融合。通过.listRowInsets()已经实现了边缘贴合，但这会移除整个视图的内边距。现在需要仅为Picker添加和Form其他列表行一致的上下内边距，且要适配用户的动态字体设置。

当前代码 #

PickerWithButton视图

struct PickerWithButton: View {
    
    @Binding var selection: String
    @Binding var strings: [String]
    @Binding var toggle: Bool
    
    var body: some View {
        HStack(spacing: 0){
            Button(action: { }, label: {
                Image(systemName: "plus")
            })
            .padding([.leading, .trailing], 12)
            .frame(maxHeight: .infinity, alignment: .center)
            .foregroundStyle(.white)
            .background(.blue)
            .onTapGesture {
                toggle.toggle()
            }
            Picker("Picker", selection: $selection) {
                ForEach(strings, id: \.self){
                    Text($0)
                }
            }
            .padding(.leading, 20)
            .padding([.top, .bottom], /* 需要添加系统列表行上下内边距 */ ) // 此处需修改
        }
        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 20))
    }
}

ContentView使用示例

struct ContentView: View {
    
    @State var string: String = "string"
    @State var options: [String] = ["string", "1", "2"]
    @State var toggle: Bool = false
    @State var userInput: String = ""
    
    var body: some View {
        Form{
            PickerWithButton(selection: $string, strings: $options, toggle: $toggle)
                .alert("Alert Title", isPresented: $toggle){
                    TextField("Example Text", text: $userInput)
                    Button("Add", role: .cancel) {
                        string = userInput
                        options.append(userInput)
                        options.sort()
                        userInput = ""
                    }
                    Button ("Cancel", role: .destructive) {
                        userInput = ""
                    }
                }
        }
    }
}

问题痛点 #

硬编码内边距值仅在标准字体尺寸下能与其他列表行对齐，切换到XXLarge等大字体时，高度会出现明显差异。尝试过GeometryReader和搜索EdgeInsets用法，均未解决。

解决方案 #

不需要手动获取系统内边距，通过调整布局结构即可实现需求：让Picker保留默认的上下内边距（自动适配动态字体），同时将Button放置在列表行的左侧边缘区域。

修改后的PickerWithButton代码：

struct PickerWithButton: View {
    
    @Binding var selection: String
    @Binding var strings: [String]
    @Binding var toggle: Bool
    
    // 定义Button的固定宽度，可根据需求调整
    private let buttonWidth: CGFloat = 50
    
    var body: some View {
        Picker("Picker", selection: $selection) {
            ForEach(strings, id: \.self){
                Text($0)
            }
        }
        // 调整列表行内边距，给Button留出左侧空间
        .listRowInsets(EdgeInsets(
            top: 0,
            leading: buttonWidth,
            bottom: 0,
            trailing: 20
        ))
        // 将Button叠加在Picker左侧
        .overlay(alignment: .leading) {
            Button(action: { toggle.toggle() }) {
                Image(systemName: "plus")
                    .padding([.leading, .trailing], 12)
                    .frame(maxHeight: .infinity, alignment: .center)
                    .foregroundStyle(.white)
                    .background(.blue)
            }
            .frame(width: buttonWidth)
        }
    }
}

原理说明 #

1. Picker保留了默认的上下内边距，会自动根据系统动态字体设置调整高度，和Form中其他列表行保持一致。
2. 通过listRowInsets将左侧内边距设置为Button的宽度，确保Picker的内容不会被Button遮挡。
3. 使用overlay将Button固定在列表行的左侧边缘，frame(maxHeight: .infinity)让Button高度与列表行完全匹配。

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