Why is ScrollView ignoring the shadow of the header? - swiftui

Question

I am trying to use a custom made header for a view and the child views of the ScrollView seem to ignore the shadow and go over top of it. Is there a simple fix or should I set up the all the Views in a different way?
I have tried rearranging the order of the views and using ZStack instead of VStack, but then I have to deal with spacing issues revolving around the top of the ScrollView being covered by the header. I have also tried rearranging the order of modifiers, but I am clearly missing something.
import SwiftUI
struct Test: View {
var body: some View {
NavigationView {
GeometryReader { proxy in
let safeAreaTop = proxy.safeAreaInsets.top
let deviceWidth = proxy.size.width
VStack(spacing: 0) {
HeaderView()
.padding(.top, safeAreaTop)
.background(Color.white)
.shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 5)
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)
}
}
Spacer(minLength: 0)
}
}
}
}
}
#ViewBuilder
func HeaderView() -> some View {
VStack {
HStack {
ForEach(0..<5, id: \.self) { index in
Spacer()
Text("Tab\(index)")
Spacer()
}
}
.padding(.horizontal)
}
}
}

Answer 1

You need to add a little spacing between your HeaderView and ScrollView to show the bottom shadow of HeaderView.
You can achieve this by either setting spacing for your VStack or by adding top padding to your ScrollView.
Spacing with VStack:
VStack(spacing: 5) {
HeaderView()
.padding(.top, safeAreaTop)
.background(Color.white)
.shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 5)
ScrollView(.vertical, showsIndicators: false) {
//Content of ScrollView
}
}
Top padding to ScrollView:
VStack(spacing: 0) {
HeaderView()
.padding(.top, safeAreaTop)
.background(Color.white)
.shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 5)
ScrollView(.vertical, showsIndicators: false) {
//Content of ScrollView
}
.padding(.top, 5)
}