SwiftUI：如何消除列表中粘性（固定）标题两侧的空白区域

问题背景 #

我创建了一个带有彩色背景的列表，代码如下：

List {
    ForEach(1...5, id: \.self) { i in
        Section(header:
            ZStack {
                Color.orange.edgesIgnoringSafeArea(.all)
                Text("Header \(i)")
            }
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        ) {
            ForEach(1...5, id: \.self) { j in
                Text("Item \(i)-\(j)")
                    .listRowBackground(Color.red.edgesIgnoringSafeArea(.all))
            }
        }
    }
}
.listStyle(.plain)
.background(Color.yellow.edgesIgnoringSafeArea(.all))

竖屏模式下显示正常：

但在横屏模式下滚动时，粘性（固定）标题的左右两侧会出现空白区域，无法消除该问题：

实际应用中因顶部存在工具栏，问题表现更严重。推测空白是透过黄色背景的模糊白色区域，希望此处显示橙色背景。

解决思路 #

1. 完全自定义粘性Header（替代系统Section） #

系统Section的粘性Header有内置布局限制，无法完全填充屏幕宽度。改用ScrollView+LazyVStack组合，实现完全自定义的粘性头部，彻底控制背景与布局：

struct CustomStickyList: View {
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0) {
                ForEach(1...5, id: \.self) { i in
                    SectionView(headerText: "Header \(i)", itemCount: 5)
                }
            }
        }
        .background(Color.yellow.edgesIgnoringSafeArea(.all))
    }
}

struct SectionView: View {
    let headerText: String
    let itemCount: Int
    
    var body: some View {
        VStack(spacing: 0) {
            // 自定义粘性Header
            ZStack {
                Color.orange
                Text(headerText)
            }
            .frame(maxWidth: .infinity, minHeight: 50)
            
            // 列表项
            ForEach(1...itemCount, id: \.self) { j in
                Text("Item \(headerText.split(separator: " ").last!)-\(j)")
                    .frame(maxWidth: .infinity, minHeight: 50)
                    .background(Color.red)
            }
        }
    }
}

如果需要精准的粘性定位，可额外添加GeometryReader监听滚动偏移，动态固定Header位置。

2. 借助UIKit代理调整系统List #

SwiftUI的List底层基于UITableView，可通过Introspect库获取实例，修改Header的布局约束与背景：

import Introspect

List {
    ForEach(1...5, id: \.self) { i in
        Section(header:
            ZStack {
                Color.orange
                Text("Header \(i)")
            }
            .frame(maxWidth: .infinity)
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        ) {
            ForEach(1...5, id: \.self) { j in
                Text("Item \(i)-\(j)")
                    .listRowBackground(Color.red)
                    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            }
        }
    }
}
.listStyle(.plain)
.background(Color.yellow.edgesIgnoringSafeArea(.all))
.introspectTableView { tableView in
    tableView.sectionHeaderTopPadding = 0
    tableView.separatorInset = .zero
    tableView.layoutMargins = .zero
    // 强制设置粘性Header的背景色
    if let headerView = tableView.tableHeaderView {
        headerView.backgroundColor = UIColor.orange
    }
}

注：需先通过Swift Package Manager导入Introspect库。

3. 优化现有List的布局参数 #

通过调整listRowInsets、frame以及安全区域设置，最大化填充Header宽度：

List {
    ForEach(1...5, id: \.self) { i in
        Section(header:
            ZStack {
                Color.orange
                Text("Header \(i)")
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
            .listRowBackground(Color.orange)
        ) {
            ForEach(1...5, id: \.self) { j in
                Text("Item \(i)-\(j)")
                    .listRowBackground(Color.red)
                    .listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
            }
        }
    }
}
.listStyle(.plain)
.background(Color.yellow.edgesIgnoringSafeArea(.all))

该方法对简单场景有效，但复杂布局下仍可能受限于系统List的内置约束。

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