ZStack background ignoring protected space whereas content material respects it, all scrolling collectively in ScrollView

I am making an attempt to create a ScrollView with content material on the prime that has the next necessities:

• The content material (1. VStack) needs to be in a ZStack with a background shade (or picture)

• The background ought to lengthen edge-to-edge (ignore protected space)

• The content material itself ought to respect the protected space

• The whole ZStack (background + content material) and the remainder of the ScrollView (e.g. the two. VStack) ought to scroll along with the ScrollView content material

The Drawback:

As you possibly can see within the picture, the background extends past the Protected Space as supposed. Nonetheless, the content material (1st VStack) is positioned behind the notch. However the content material needs to be aligned usually and stay absolutely seen.

I am unable to work out the way to obtain this structure. Merely including a background behind the ScrollView would not work as a result of I would like the background to scroll with the content material, not stay mounted.

Within the connected image, you possibly can see that the VStack ought to respect the protected space, however the background ought to lengthen beneath it.

What I’ve Tried:

I’ve tried totally different approaches and I am sharing one among them under, however none of my makes an attempt have labored to date.

struct DemoView: View {
    var physique: some View {
        ScrollView {
            ZStack {
                Colour.blue
                // 1. VStack
                VStack {
                    Textual content("1. Hiya World")
                    Textual content("2. Hiya World")
                    Textual content("3. Hiya World")
                    Textual content("4. Hiya World")
                    Textual content("5. Hiya World")
                }
                .safeAreaPadding()
            }
            
            // 2. VStack
            VStack {
                Textual content("1. Extra textual content")
                Textual content("2. Extra textual content")
                Textual content("3. Extra textual content")
                Textual content("4. Extra textual content")
                Textual content("5. Extra textual content")
            }
        }
        .ignoresSafeArea()
    }
}

#Preview {
    DemoView()
}

I would be glad about any solutions on the way to clear up this.