ZStack background ignoring safe area while content respects it, all scrolling together in ScrollView

I’m trying to create a ScrollView with content at the top that has the following requirements:

• The content (1. VStack) should be in a ZStack with a background color (or image)

• The background should extend edge-to-edge (ignore safe area)

• The content itself should respect the safe area

• The entire ZStack (background + content) and the rest of the ScrollView (e.g. the 2. VStack) should scroll together with the ScrollView content

The Problem:

As you can see in the image, the background extends beyond the Safe Area as intended. However, the content (1st VStack) is positioned behind the notch. But the content should be aligned normally and remain fully visible.

I can’t figure out how to achieve this layout. Simply adding a background behind the ScrollView doesn’t work because I need the background to scroll with the content, not remain fixed.

In the attached picture, you can see that the VStack should respect the safe area, but the background should extend underneath it.

What I’ve Tried:

I’ve tried different approaches and I’m sharing one of them below, but none of my attempts have worked so far.

struct DemoView: View {
    var body: some View {
        ScrollView {
            ZStack {
                Color.blue
                // 1. VStack
                VStack {
                    Text("1. Hello World")
                    Text("2. Hello World")
                    Text("3. Hello World")
                    Text("4. Hello World")
                    Text("5. Hello World")
                }
                .safeAreaPadding()
            }
            
            // 2. VStack
            VStack {
                Text("1. More text")
                Text("2. More text")
                Text("3. More text")
                Text("4. More text")
                Text("5. More text")
            }
        }
        .ignoresSafeArea()
    }
}

#Preview {
    DemoView()
}

I’d be grateful for any suggestions on how to solve this.

Source link