SwiftUI：如何实现iOS设置应用样式的列表分隔线内边距

针对你想要的iOS设置应用列表效果——标题与分隔线对齐、带分组且无折叠按钮，这里提供两种可行方案：

方案一：用SidebarListStyle+禁用Section折叠（iOS 15+） #

在SidebarListStyle的List中，给每个Section添加.collapsible(false)修饰符，就能保留标题对齐的效果，同时禁用默认的折叠按钮，还能保留Section的分组分隔。

修改后的代码如下：

import SwiftUI

struct Test3View: View {
    var body: some View {
        NavigationView{
            List() {
                Section() {
                    NavigationLink(destination: Text("")) {
                        Label("row1", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row2", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row3", systemImage: "pencil.circle.fill")
                    }
                }
                .collapsible(false) // 禁用折叠按钮
                
                Section() {
                    NavigationLink(destination: Text("")) {
                        Label("row4", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row5", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row6", systemImage: "pencil.circle.fill")
                    }
                }
                .collapsible(false) // 禁用折叠按钮
                
            }
            .listStyle(SidebarListStyle())
        }
    }
}

方案二：自定义普通List的内边距与分隔线（兼容低版本） #

如果需要兼容iOS 15以下版本，可以通过自定义行内边距和分隔线来实现标题与分隔线对齐的效果：

import SwiftUI

struct CustomSettingsView: View {
    // 统一设置行内边距，让标题对齐左侧
    private let rowInsets = EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)
    
    var body: some View {
        NavigationView{
            List() {
                Section() {
                    NavigationLink(destination: Text("")) {
                        HStack(spacing: 16) {
                            Image(systemName: "pencil.circle.fill")
                                .frame(width: 24) // 固定图标宽度，保证标题对齐
                            Text("row1")
                        }
                    }
                    .listRowInsets(rowInsets)
                    
                    NavigationLink(destination: Text("")) {
                        HStack(spacing: 16) {
                            Image(systemName: "pencil.circle.fill")
                                .frame(width: 24)
                            Text("row2")
                        }
                    }
                    .listRowInsets(rowInsets)
                    
                    NavigationLink(destination: Text("")) {
                        HStack(spacing: 16) {
                            Image(systemName: "pencil.circle.fill")
                                .frame(width: 24)
                            Text("row3")
                        }
                    }
                    .listRowInsets(rowInsets)
                }
                
                Section() {
                    NavigationLink(destination: Text("")) {
                        HStack(spacing: 16) {
                            Image(systemName: "pencil.circle.fill")
                                .frame(width: 24)
                            Text("row4")
                        }
                    }
                    .listRowInsets(rowInsets)
                    
                    NavigationLink(destination: Text("")) {
                        HStack(spacing: 16) {
                            Image(systemName: "pencil.circle.fill")
                                .frame(width: 24)
                            Text("row5")
                        }
                    }
                    .listRowInsets(rowInsets)
                    
                    NavigationLink(destination: Text("")) {
                        HStack(spacing: 16) {
                            Image(systemName: "pencil.circle.fill")
                                .frame(width: 24)
                            Text("row6")
                        }
                    }
                    .listRowInsets(rowInsets)
                }
            }
            // 调整分隔线内边距，使其与标题对齐
            .onAppear {
                UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 0)
            }
            .onDisappear {
                // 恢复默认设置，避免影响其他页面
                UITableView.appearance().separatorInset = UIEdgeInsets.zero
            }
        }
    }
}

说明 #

• 方案一利用SwiftUI原生API实现，代码简洁，适合iOS 15及以上版本；
• 方案二通过自定义布局和调整UITableView的系统样式实现，兼容性更强，但需要注意恢复系统默认设置避免影响其他页面。

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