iOS 15下如何移除InsetGroupedListStyle样式List的顶部多余内边距

问题原因 #

iOS 15 对 InsetGroupedListStyle 样式的 List 新增了默认的 section 头部顶部间距默认值，该配置在 iOS 14 及更低版本中不存在，因此会出现双版本表现不一致的问题，效果差异如下：

• iOS 14 显示效果：
  
• iOS 15 显示效果：
  

最优解决方案（兼容全版本） #

直接给 List 添加 listSectionHeaderTopPadding 环境变量配置即可，该属性仅在 iOS 15+ 生效，低版本系统会自动忽略，不会影响原有表现：

List {
    Section(header: Text("Header")) {
        // some content
    }
}
.listStyle(InsetGroupedListStyle())
.environment(\.listSectionHeaderTopPadding, 0) // 移除iOS15默认新增的顶部间距

自定义间距方案 #

如果你需要手动控制头部间距的大小，而非完全移除，可以调整上述环境变量的数值，或者自定义 Section 头部的边距规则：

List {
    Section(
        header: Text("Header")
            .padding(.vertical, 4) // 自定义头部上下间距
            .padding(.horizontal, 16) // 匹配系统默认的左右内边距
            .listRowInsets(EdgeInsets()) // 移除系统默认的行边距
    ) {
        // some content
    }
}
.listStyle(InsetGroupedListStyle())

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