SwiftUI List Section无法置顶：如何消除顶部多余间距？

使用以下SwiftUI代码实现的List Section无法固定在顶部，即便Section高度极小，其顶部仍存在空白区域，无法与List顶部对齐。如何让Section置顶，或使其仅占用所需高度以消除顶部多余间距？

import SwiftUI

struct ContentView: View {
    
    var data = createData()
    
    var body: some View {
        NavigationView {
            List {
                ForEach(data, id: \.name) { header in
                    Section {
                        ForEach(header.items, id: \.self) { item in
                            Text(item)
                        }
                    } header: {
                        Text(header.name)
                            .background(Color.purple)
                    }
                }
            }
            .listStyle(.plain)
            .navigationTitle("Hello Users")
            .background(Color.cyan)
        }
    }
}

#Preview {
    ContentView()
}

struct UserDataSection {
    var name: String
    var items: [String]
}

func createData() -> [UserDataSection] {
    var sections: [UserDataSection] = []
    sections.append(UserDataSection(name: "Admin Users", items: createDataSet1()))
    sections.append(UserDataSection(name: "Generic Users", items: createDataSet2()))
    return sections
}


func createDataSet1() -> [String] {
    var items: [String] = []
    for i in 0..<20 {
        items.append("User \(i)")
    }
    return items
}

func createDataSet2() -> [String] {
    var items: [String] = []
    for i in 20..<40 {
        items.append("User \(i)")
    }
    return items
}

解决方案 #

方法1：取消Section Header默认最小高度 #

通过环境变量移除Section Header的默认最小高度限制，同时让Header自适应内容高度：

List {
    ForEach(data, id: \.name) { header in
        Section {
            ForEach(header.items, id: \.self) { item in
                Text(item)
            }
        } header: {
            Text(header.name)
                .background(Color.purple)
                .frame(maxWidth: .infinity, alignment: .leading) // 让Header占满宽度，高度自适应内容
        }
    }
}
.listStyle(.plain)
.environment(\.defaultMinListHeaderHeight, 0) // 取消Header最小高度限制
.navigationTitle("Hello Users")
.background(Color.cyan)

方法2：全局修改UITableView间距 #

在ContentView中添加初始化方法，修改系统UITableView的全局样式，消除Section Header顶部的默认内边距：

struct ContentView: View {
    
    var data = createData()
    
    init() {
        UITableView.appearance().sectionHeaderTopPadding = 0 // 移除Section Header顶部空白
    }
    
    var body: some View {
        // 原body代码保持不变
    }
}

方法3：调整List顶部内边距 #

如果仍有残留空白，可给List添加负顶部内边距（数值按需调整）：

List {
    // 原List内容不变
}
.padding(.top, -16) // 负间距抵消顶部空白
.listStyle(.plain)

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