SwiftUI如何让列表分区分隔线与分区标题对齐？

问题背景 #

在UIKit的UITableViewController中，分区分隔线默认与分区标题对齐；但使用SwiftUI构建列表时，分区分隔线默认与行内文本对齐，无法直接复现UIKit的原生样式。尝试使用.alignmentGuide(.listRowSeparatorLeading) { $0[.leading] }修饰符仅能让分隔线左对齐至列表边缘，达不到预期效果，且该修饰符作用于Section头部视图时不会改变分隔线位置。

解决方案 #

要实现分隔线与分区标题对齐的效果，可通过自定义行的对齐指南，让分隔线匹配分区标题的缩进位置，以下是两种可行方案：

方案一：利用系统对齐指南（推荐） #

使用系统自带的.listRowContentLeading对齐基准，该基准与分区标题的起始位置一致，将行分隔线的leading对齐到该位置即可：

struct ContentView: View {
    let items = ["star", "heart", "bell"]
    
    var body: some View {
        NavigationStack {
            List {
                Section("Symbols") {
                    ForEach(items, id: \.self) { symbolName in
                        HStack {
                            Image(systemName: symbolName)
                            Text(symbolName)
                        }
                        // 让行分隔线与分区标题对齐
                        .alignmentGuide(.listRowSeparatorLeading) { context in
                            context[.listRowContentLeading]
                        }
                    }
                }
            }
            .listStyle(.plain)
            .navigationTitle("示例")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

方案二：手动设置偏移量 #

若需要更精细的控制，可手动设置标题和分隔线的缩进偏移量：

struct ContentView: View {
    let items = ["star", "heart", "bell"]
    // 自定义缩进量，匹配系统默认标题缩进
    private let sectionIndent: CGFloat = 16
    
    var body: some View {
        NavigationStack {
            List {
                Section {
                    ForEach(items, id: \.self) { symbolName in
                        HStack {
                            Image(systemName: symbolName)
                            Text(symbolName)
                        }
                        .alignmentGuide(.listRowSeparatorLeading) { $0[.leading] + sectionIndent }
                    }
                } header: {
                    Text("Symbols")
                        .padding(.leading, sectionIndent)
                }
            }
            .listStyle(.plain)
            .navigationTitle("示例")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

对比代码（UIKit与SwiftUI） #

SwiftUI默认实现（无修改） #

struct ContentView: View {
    let items = ["star", "heart", "bell"]
    
    var body: some View {
        NavigationStack {
            List {
                Section("Symbols") {
                    ForEach(items, id: \.self) { symbolName in
                        HStack {
                            Image(systemName: symbolName)
                            Text(symbolName)
                        }
                    }
                }
            }
            .listStyle(.plain)
            .navigationTitle("示例")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

UIKit实现（作为对比） #

struct ContentViewUIKit: View {
    var body: some View {
        NavigationStack {
            SymbolsTableViewControllerWrapper()
                .navigationTitle("示例")
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct SymbolsTableViewControllerWrapper: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UITableViewController {
        return SymbolsTableViewController()
    }

    func updateUIViewController(_ uiViewController: UITableViewController, context: Context) {}
}

class SymbolsTableViewController: UITableViewController {
    private let items = ["star", "heart", "bell"]

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "示例"
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        tableView.tableFooterView = UIView() // 隐藏空白行
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }

    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "Symbols"
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        let symbolName = items[indexPath.row]
        cell.textLabel?.text = symbolName
        cell.imageView?.image = UIImage(systemName: symbolName)
        return cell
    }
}

#Preview("SwiftUI") {
    ContentView()
}

#Preview("UIKit") {
    ContentViewUIKit()
}

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