如何让SwiftUI列表顶部背景保持固定不向上滑动？

举例说明：列表的浅灰色上部背景不应随列表上滑而移动，仅允许列表内容向屏幕底部方向滚动。

要实现这种效果，核心是把固定背景和可滚动列表分层布局，让列表在背景下方滚动，同时调整列表的样式和偏移量避免冲突。以下是修改后的完整代码：

import SwiftUI

struct Attendance: Identifiable {
    let id = UUID()
    let name: String
}

struct AttendanceRow: View {
    var attendance: Attendance
    
    var body: some View {
        HStack {
            Text(attendance.name)
        }
        .padding(.vertical, 20)
        .background(Color.white) // 给行添加白色背景，区分滚动内容与固定背景
    }
}

struct ContentView: View {
    let attendances = [
        Attendance(name: "John"),
        Attendance(name: "Michael"),
        Attendance(name: "Steve"),
        Attendance(name: "Donald"),
        Attendance(name: "Johathan"),
        Attendance(name: "William"),
        Attendance(name: "Dave"),
        Attendance(name: "Richard"),
        Attendance(name: "Boris"),
        Attendance(name: "Catherine"),
        Attendance(name: "Susan")
    ]
    
    var body: some View {
        NavigationView {
            ZStack(alignment: .top) {
                // 固定的顶部背景
                Color(.systemGray6)
                    .frame(height: 120) // 设置固定背景高度
                
                // 可滚动的列表
                List {
                    ForEach(attendances) { attendance in
                        AttendanceRow(attendance: attendance)
                    }
                }
                .listStyle(.plain) // 去除默认分组背景
                .padding(.top, 120) // 让列表向下偏移，避开固定背景
                .background(Color.clear) // 列表背景设为透明，露出底层固定背景
            }
            .navigationTitle("出勤列表")
        }
    }
}

关键实现点： #

• 用ZStack分层：固定背景在底层，列表在上方
• 给列表设置顶部内边距，让内容从固定背景下方开始显示
• 切换列表为plain样式并设透明背景，避免默认样式遮挡固定背景
• 给列表行添加白色背景，让滚动内容和灰色固定背景形成区分

如果需要在固定背景区域添加标题、按钮等元素，直接在ZStack的背景层中插入即可，这些元素不会随列表滚动。

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