SwiftUI在iOS 15中使用GroupedListStyle()时出现内边距异常问题

我之前在适配iOS 15的时候也碰到过一模一样的问题！iOS 15对GroupedListStyle下的Section头部和尾部内边距做了默认调整，系统自动添加了额外的间距，导致之前在iOS 14及更早版本设置的.padding(20)会和新的默认内边距叠加，最终显示出来的间距就变得过大了。

下面是几种我亲测有效的解决方案：

1. 根据系统版本动态调整padding值 #

这是最直接的兼容方案，通过版本判断来给不同系统设置对应的padding值，既能适配iOS 15的新布局，也能保留旧版本的原有效果：

ZStack { 
    NavigationView { 
        List { 
            Section(
                header: Text("1")
                    .padding(.top, #available(iOS 15.0, *) ? 0 : 20), 
                footer: Text("2")
                    .padding(.bottom, #available(iOS 15.0, *) ? 0 : 20)
            ) {
                // 列表内容项
            }
        } 
        .listStyle(GroupedListStyle()) 
    } 
}

2. 使用iOS 15新增的Section内边距配置API #

iOS 15专门为Section新增了listSectionHeaderPadding(_:)和listSectionFooterPadding(_:)两个修饰符，可以直接控制头部和尾部的内边距，不用再给Text单独加padding，代码更简洁：

ZStack { 
    NavigationView { 
        List { 
            Section(header: Text("1"), footer: Text("2")) {
                // 列表内容项
            }
            .listSectionHeaderPadding(.zero)
            .listSectionFooterPadding(.zero)
        } 
        .listStyle(GroupedListStyle()) 
    } 
}

注意：这个API仅支持iOS 15及以上版本，如果你的APP需要兼容iOS 14及更早版本，记得配合版本判断使用。

3. 自定义Header/Footer视图（灵活度最高） #

如果上面的方案满足不了你的定制需求，可以完全自定义Section的头部和尾部视图，精准控制所有布局细节：

struct CustomSectionHeader: View {
    let title: String
    
    var body: some View {
        Text(title)
            .padding(.top, #available(iOS 15.0, *) ? 0 : 20)
            .frame(maxWidth: .infinity, alignment: .leading)
            .foregroundColor(.gray)
            // 可添加更多自定义样式
    }
}

struct CustomSectionFooter: View {
    let text: String
    
    var body: some View {
        Text(text)
            .padding(.bottom, #available(iOS 15.0, *) ? 0 : 20)
            .frame(maxWidth: .infinity, alignment: .leading)
            .foregroundColor(.gray)
    }
}

// 使用自定义视图
ZStack { 
    NavigationView { 
        List { 
            Section(
                header: CustomSectionHeader(title: "1"), 
                footer: CustomSectionFooter(text: "2")
            ) {
                // 列表内容项
            }
        } 
        .listStyle(GroupedListStyle()) 
    } 
}

本质上这个问题是苹果在iOS 15中优化了分组列表的默认布局，让Section的间距更符合现代iOS设计规范，所以旧代码中的手动padding就会和新默认值冲突，调整一下padding或者用新API就能解决啦。

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