I have a Navigation View that looks like this:

NavigationView {
        VStack {
            Text("Choose ingredients")
                .font(.title)
            Text("to search for, ")
                .font(.title)
            Text("each on their own line:")
                .font(.title)
            TextEditor(text: $userInput)
                .frame(width: 300, height: 200)
                .overlay(
                        RoundedRectangle(cornerRadius: 16)
                            .stroke(.gray, lineWidth: 2)
                    )
                .navigationTitle("Scan Labels")
                .navigationBarTitleDisplayMode(.inline)
            Button(action: {
                isShowingScanner = true // Add a cancel button!
            }, label: {
                Label("Scan", systemImage: "barcode.viewfinder")
                    .padding()
                    .font(.bold(.title2)())
                    .overlay(
                            RoundedRectangle(cornerRadius: 16)
                                .stroke(.blue, lineWidth: 2)
                        )
            })
            .padding()
        }

But no matter how I've tried, I cannot change the background color. I've tried adding Color.color.ignoreSafeArea(), both under the NavigationView and VStack. I've also tried adding .background() to both. But neither are giving me the entire background. Thoughts?

CodePudding user response：

try this approach, works very well for me:

NavigationView {
    ZStack {  // <-- here
        Color.green.ignoresSafeArea()  // <-- here
        VStack {
           //...
        }
    }
}