How to stop text from wiping background color with NavigationStack?

Question

New to swift and stuck at the starting line...

I am simply trying to fill the whole background of a page using gradient. I have seen this is possible using ContainerRelativeShape() so have tried and it works well. My problem is that when I go to input text or anything of the sort after that, it creates a white background behind it.

I have tried simply filling with Color.blue at the start of the stack for example but the same thing seems to happen?

This is reproducible code to show what I am doing at the moment to try fill color.

By the way, I am making an app specific to iPad so unsure if this has some effect on the fill properties? I am using NavigationStack so the whole iPad screen is in use as opposed to the sidebar.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationStack {
            backgroundFillView()
            VStack {
                Text("HELLO")
            }
            .navigationBarTitle("TITLE")
        }
    }
}
struct backgroundFillView: View {
    var body: some View {
        ContainerRelativeShape()
            .fill(Color.blue.gradient)
            .ignoresSafeArea()
            
    }
}

Any help would be greatly appreciated.

Answer 1

You're using VStack which means all subviews will be aligned from top to bottom. Wrapped inside a ZStack, that assigns each subview a higher z-axis, can fix this issue.

Notes: name of a class or structure should be capitalized.

NavigationStack {
    ZStack {
        BackgroundFillView()
        VStack {
            TextField("Input here", text: $text)
            Text("HELLO")
        }
    }
    .navigationBarTitle("TITLE")
}

Output: