SwiftUI黑色阴影不显示：请求实现Header滚动渐变遮挡效果

问题分析 #

黑色阴影不显示的核心原因是阴影颜色与背景色完全一致时，无视觉对比度。SwiftUI的shadow是在视图边缘生成的模糊效果，当阴影色和背景色都是纯黑时，人眼无法区分，自然看不到效果。而你需要的滚动时内容被Header下方渐变遮挡的需求，更适合用渐变蒙版实现，而非单纯的阴影。

解决方案 #

给Header添加底部线性渐变层，从透明过渡到黑色（或半透明灰色），让ScrollView内容向上滚动时被渐变自然遮挡，替代生硬分割线。以下是修改后的完整代码：

import Foundation
import SwiftUI

struct BackButton: View {
    var body: some View {
        Button(action: {
            print("test")
        }) {
            Image(systemName: "chevron.backward")
                .resizable()
                .font(.system(size: 20, weight: .heavy, design: .rounded))
                .frame(width: 14, height: 20)
        }
        .foregroundColor(.white)
    }
}

struct NavHeader: View {
    
    var title: String = "NavHeader"
    
    var body: some View {
        HStack {
            BackButton()
                .padding(.horizontal)
            Spacer()
        }
        .overlay {
            Text(self.title)
                .foregroundColor(.white)
                .font(.system(size: 20, weight: .semibold))
        }
    }
}

struct Item: View {
    let image: String
    
    var body: some View{
        ZStack{
            Circle()
                .fill(.white)
                .opacity(0.13)
                .frame(width: 59, height: 59)
            Image(systemName: image)
                .resizable()
                .scaledToFit()
                .frame(height: 36)
                .foregroundColor(.white)
        }
        .padding()
    }
}

struct MainView: View {
    var body: some View {
        VStack(spacing: 0) { // 取消默认间距，让渐变与ScrollView无缝衔接
            NavHeader()
                .padding(.vertical)
                .background(
                    ZStack(alignment: .bottom) {
                        Color.black // Header背景色
                        // 底部渐变层：从透明过渡到半透明黑，模拟阴影模糊范围
                        LinearGradient(
                            gradient: Gradient(colors: [.clear, .black.opacity(0.8)]),
                            startPoint: .top,
                            endPoint: .bottom
                        )
                        .frame(height: 8)
                    }
                )
            
            ScrollView(showsIndicators: false) {
                VStack { // 增加测试内容，方便查看滚动效果
                    HStack{
                        Item(image: "house.fill")
                        Item(image: "candybarphone")
                        Item(image: "music.note")
                        Item(image: "map.fill")
                    }.padding()
                    
                    // 重复生成内容，让ScrollView可滚动
                    ForEach(0..<10) { _ in
                        HStack{
                            Item(image: "house.fill")
                            Item(image: "candybarphone")
                            Item(image: "music.note")
                            Item(image: "map.fill")
                        }.padding()
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        MainView()
            .background(Color.black)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键修改说明 #

1. 取消VStack间距：设置VStack(spacing: 0)，确保渐变层与ScrollView完全贴合，无缝隙。
2. Header背景用ZStack叠加渐变：在黑色背景上添加底部线性渐变，从透明过渡到半透明黑，模拟自然的遮挡效果。
3. 增加滚动测试内容：通过循环生成多行Item，让ScrollView有足够内容滚动，便于验证渐变遮挡效果。

如果想要更接近阴影的模糊质感，可给渐变层添加blur修饰符：

LinearGradient(gradient: Gradient(colors: [.clear, .black.opacity(0.6)]), startPoint: .top, endPoint: .bottom)
    .frame(height: 12)
    .blur(radius: 4)

调整后，滚动ScrollView时下方内容会被Header底部渐变自然遮挡，完全符合需求，同时解决了黑色阴影不可见的问题。

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