iOS15下SwiftUI List Section头部垂直内边距如何对齐iOS14效果

解决方案 #

iOS 15 对 UITableView 底层默认新增了 Section 头部顶部间距，导致 SwiftUI List 的 Section 头部垂直内边距和 iOS 14 不一致，你可以通过以下方案解决：

方案1：全局统一调整（适合全App列表样式对齐）

在 App 入口处添加 UIKit 外观代理配置，直接修改 UITableView 的默认行为：

// 写在 App 初始化方法或者 didFinishLaunchingWithOptions 生命周期中
if #available(iOS 15.0, *) {
    // 移除iOS15默认新增的Section头部顶部间距
    UITableView.appearance().sectionHeaderTopPadding = 0
    // 若有需要可自定义全局Section头部高度
    // UITableView.appearance().sectionHeaderHeight = 自定义高度值
}

搭配你已经添加的 .listStyle(PlainListStyle()) 修饰符，即可基本对齐 iOS 14.5 的显示效果。

方案2：单个列表/Section单独调整

如果不需要全局修改，只需要给指定 Section 的头部添加 listRowInsets 修饰符自定义内边距，按需调整数值即可：

List {
    ForEach((1...3), id: \.self) { _ in
        Section(
            header: Text("My Section")
                        .font(.system(.title3))
                        .fontWeight(.bold)
                        .foregroundColor(.primary)
                        // 自定义上下左右内边距，数值可根据实际效果调整到和iOS14一致
                        .listRowInsets(EdgeInsets(top: 6, leading: 16, bottom: 6, trailing: 16)),
            content: {
                ForEach((1...5), id: \.self) { _ in
                    Text("My Row")
                }
            }
        )
    }
}
.listStyle(PlainListStyle())

两种方案可以搭配使用，调整数值直到显示效果和 iOS 14.5 完全对齐即可。

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