SwiftUI中ScrollView为何会遮挡Header的阴影？

方案1：提升Header层级（最简单直接） #

给Header添加zIndex(1)，让它的渲染层级高于下方的ScrollView，这样阴影就能正常显示不会被覆盖：

HeaderView()
    .padding(.top, safeAreaTop)
    .background(Color.white)
    .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 5)
    .zIndex(1) // 添加此行提升层级

方案2：配合顶部内边距优化体验 #

如果担心ScrollView内容紧贴Header，给ScrollView的内容顶部加少量内边距，预留阴影的显示空间：

ScrollView(.vertical, showsIndicators: false) {
    VStack(spacing: 0) {
        Text("Title")
            .padding(.top, 10) // 给标题加顶部间距
        ForEach(0..<12, id: \.self) { index in
            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .fill(Color.white)
                .frame(width: deviceWidth / 1.5, height: 200)
                .shadow(color: .black.opacity(0.3), radius: 5, x: 0, y: 5)
        }
    }
    .padding(.top, 5) // 给整个ScrollView内容加顶部内边距
}

方案3：ZStack布局的正确姿势（解决之前的遮挡问题） #

如果想用ZStack实现，需要给ScrollView设置顶部内边距等于Header的高度，避免内容被Header遮挡：

GeometryReader { proxy in
    let safeAreaTop = proxy.safeAreaInsets.top
    let deviceWidth = proxy.size.width
    let headerHeight = 50.0 // 可根据Header实际高度调整，也可用GeometryReader动态获取
    
    ZStack(alignment: .top) {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 0) {
                Text("Title")
                ForEach(0..<12, id: \.self) { index in
                    RoundedRectangle(cornerRadius: 20, style: .continuous)
                        .fill(Color.white)
                        .frame(width: deviceWidth / 1.5, height: 200)
                        .shadow(color: .black.opacity(0.3), radius: 5, x: 0, y: 5)
                }
            }
            .padding(.top, headerHeight + safeAreaTop) // 预留Header的高度空间
        }
        
        HeaderView()
            .padding(.top, safeAreaTop)
            .background(Color.white)
            .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 5)
            .frame(height: headerHeight)
    }
}

问题根源 #

SwiftUI的VStack是按从上到下的顺序渲染视图，Header的阴影会绘制在自身下方区域，而ScrollView的子视图会占据Header下方的空间，当子视图的纯色背景（比如示例中的白色圆角矩形）覆盖到阴影区域时，就会把阴影挡住。提升Header的zIndex能让它的阴影在ScrollView内容上方渲染，从而解决覆盖问题。

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