Why is ScrollView ignoring the shadow of the header?

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)
        }
    }
}

Shadow below child views

score 0 · Answer 1 · answered Jan 20 '23 at 05:41

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)
}

Thank you for your response! This was my fault that I did not clarify properly. Using padding creates a cut off that I am to really going for. Your solution works perfectly fine, I am just going for something different. I was trying to get away without using ZStack so that it is easier to control the top padding of the scrollview on different screen sizes. Thank you again for taking the time to answer the question. — MatchaMatcha, Jan 23 '23 at 21:31
@MatchaMatcha I'm not able to understand what you are trying to say. In my above answer, I have used `VStack` only not the `ZStack`. One more thing if my answer helps you then you can accept it as the answer to your question. — Nirav D, Jan 24 '23 at 05:18

Why is ScrollView ignoring the shadow of the header?

1 Answers1