如何调整SwiftUI List分组首行顶部分隔符的内边距？

因为SwiftUI原生分组List的首行顶部分隔符与分组标题绑定，无法通过alignmentGuide直接修改其内边距，以下是两种可行的实现方式：

方式一：自定义分组标题+手动绘制分隔线 #

通过隐藏系统默认分隔符，手动在分组标题底部添加左对齐分隔线，同时为普通行设置带内边距的分隔符：

struct CustomGroupedList: View {
    let groupData = [
        "分组A": ["条目1", "条目2", "条目3"],
        "分组B": ["条目1", "条目2"]
    ]
    
    var body: some View {
        List {
            ForEach(Array(groupData.keys), id: \.self) { groupTitle in
                Section {
                    ForEach(groupData[groupTitle]!, id: \.self) { item in
                        Text(item)
                            // 设置普通行分隔符左内边距为20
                            .alignmentGuide(.listRowSeparatorLeading) { _ in
                                20
                            }
                            .alignmentGuide(.listRowSeparatorTrailing) { _ in
                                0
                            }
                    }
                } header: {
                    VStack(alignment: .leading, spacing: 0) {
                        Text(groupTitle)
                            .font(.headline)
                            .padding(.vertical, 8)
                            .padding(.horizontal)
                        // 手动绘制左对齐的分组底部分隔线
                        Rectangle()
                            .frame(height: 0.5)
                            .foregroundColor(.separator)
                    }
                }
            }
        }
        .listStyle(.insetGrouped)
        .onAppear {
            // 隐藏系统默认分隔符
            UITableView.appearance().separatorStyle = .none
        }
        .onDisappear {
            // 恢复系统默认设置，避免影响其他页面
            UITableView.appearance().separatorStyle = .singleLine
        }
    }
}

方式二：结合UIKit外观设置+SwiftUI对齐指南 #

通过全局调整UITableView的分隔符内边距，再用SwiftUI的alignmentGuide为普通行单独设置内边距：

struct GroupedListSeparatorFix: View {
    let groupData = [
        "分组A": ["条目1", "条目2", "条目3"],
        "分组B": ["条目1", "条目2"]
    ]
    
    var body: some View {
        List {
            ForEach(Array(groupData.keys), id: \.self) { groupTitle in
                Section(header: Text(groupTitle)) {
                    ForEach(groupData[groupTitle]!, id: \.self) { item in
                        Text(item)
                            // 覆盖全局设置，为普通行设置20的左内边距
                            .alignmentGuide(.listRowSeparatorLeading) { _ in
                                20
                            }
                    }
                }
            }
        }
        .listStyle(.insetGrouped)
        .onAppear {
            // 设置所有分隔符左内边距为0（分组首行顶部分隔符会继承这个设置）
            UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        }
        .onDisappear {
            // 恢复系统默认分隔符内边距
            UITableView.appearance().separatorInset = .init(top: 0, left: 16, bottom: 0, right: 0)
        }
    }
}

注意事项 #

• 若使用PlainListStyle，只需对应修改列表样式，核心逻辑不变。
• 方式一的优势是完全自定义分隔线样式（颜色、高度均可调整），不受系统限制；方式二更简洁，适合追求原生风格的场景。

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