SwiftUi - Background can't be changed / can't be reached

Question

I have a problem with my background. Since some days I play with SwiftUi and everything is fine.

Yesterday I filled my screen with a background and just the top fitting doesnt work, so I undone my changes. Now the problem: I cant reach my background anymore...

Actually I cant reach my background, so I can't change it.

Here is my code:

struct ContentView : View {
@State private var name = String()
@State private var pw = String()

var body: some View {
    VStack{
        NavigationView {

            Spacer()
            //Einleitung
            VStack{
                Image("user")
                    .resizable()
                    .frame(width: 100 , height: 100)
                Spacer()
                Text("Hello User.")
                Text("Please insert your Nickname and your Password")
                    .lineLimit(nil)
            }.background(Color.blue)
            .padding()
            //TextField eingabe für Name + Passwort
            HStack{
                Spacer()
                Text("Username")
                .font(.headline)
                Spacer()
            Text("Password")
                .font(.headline)
                Spacer()
            }.background(Color.red)
            HStack{
                Spacer()
                TextField($name,placeholder: Text("Fill your name"))
                    .textFieldStyle(.roundedBorder)
                    .scaledToFit()
                Spacer()
                SecureField($pw, placeholder: Text("123456789"))
                    .scaledToFit()
                    .textFieldStyle(.roundedBorder)
                    Spacer()
                }.background(Color.green)
            //LOGIN BTN
            Spacer()
            Spacer()

            Button(action: {
                print("Hallo \(self.name) - dein Password ist \(self.pw)")
            //NavigationDestinationLink :
                })
                {
                    HStack{
                        Spacer()
                        Text("Login")
                            .color(.white)
                            .bold()
                            .font(.headline)
                            .padding(.horizontal)
                        Spacer()
                    }
                    }
                    .background(Color.red,cornerRadius: 40)
                    .frame(width: 200, alignment: .bottom)
                    Spacer()
            }.background(Color.black)
        }.background(Color.yellow)
   }
}

score 2 · Accepted Answer · answered Aug 28 '19 at 13:22

There is a issue about the background color of the views inside navigationView I described earlier here in this answer. The summary of it is that there is another white view on top of the views you are tring to change the background color of. So you can't see the color.

But for now, you should reorder your views like this,

1- NavigationView should be first

2- Everything else (including that outer VStack) should be wrapped inside a ZStack

3- A Color as a first view of the ZStack

var body: some View {
    NavigationView {
        ZStack {
            Color.yellow
            VStack{
                Text("Everything else")
            }
        }
    }
}

I hope Apple provide direct API for settings like this soon.

SwiftUi - Background can't be changed / can't be reached

1 Answers1