Zorgan
Zorgan

Reputation: 9123

ZStack is not changing color

I've added Color.orange to my ZStack - but my view still has the default white/greyish background:

struct Settings: View {
    @State var minAge = UserSettings().minAge
    @State var maxAge = UserSettings().maxAge
    @State var chosenSeeking = UserSettings.Seeking.both

    var body: some View {
        ZStack {
            Color.orange
            VStack {
                NavigationView {
                        Form {
                            Section {
                                Picker("Look for", selection: $chosenSeeking) {
                                    ForEach(UserSettings.Seeking.allCases) { i in
                                        Text(String(i.rawValue))
                                    }
                                }
                            }
                            Section {
                                Text("Min age")
                                Slider(value: $minAge, in: 18...99, step: 1, label: {Text("Label")})
                                    Text(String(Int(minAge)))
                            }
                            Section {
                                Text("Max age")
                                Slider(value: $maxAge, in: 18...99, step: 1)
                                Text(String(Int(maxAge)))
                            }
                        }.navigationBarTitle(Text("Settings"))
                    }
            }
        }
    }
}

enter image description here

Any idea what the problem is?

Upvotes: 3

Views: 116

Answers (3)

Valentin
Valentin

Reputation: 385

Your problem is that your NavigationView blocks the orange color. You would have to change the background of the NavigationView itself. With default views such as NavigationView, this is typically done by implementing a custom style of that view. In the case of Button that would be ButtonStyle. NavigationView does have NavigationViewStyle, however this is not yet publicly available. Our best hope might be the next major SwiftUI iteration, which will most likely be announced at WWDC this month.

Upvotes: 0

Seungjun
Seungjun

Reputation: 984

Could you try editing your code below format? I put ZStack under NavigationView, and in this case, the background color changes to orange.

NavigationView{
     ZStack{
         Color.orange.edgesIgnoringSafeArea(.all)
            VStack{
               //some code
           }
         }
      }

Upvotes: 1

paulRick
paulRick

Reputation: 604

Best I could find was the colorMultiply:

NavigationView {
    ...
}.colorMultiply(.orange)

Upvotes: 1

Related Questions