7

I have been trying to set a background color for the whole viewController in swiftUI but I have not able to. The view does not take the attribute .backgroundColor .

I have tried using the .backgroundColor attribute for the viewController in sceneDelegate too and it is not taking the attribute but it takes the foregroundColor attribute.

lewis
  • 2,936
  • 2
  • 37
  • 72
Rakesh
  • 71
  • 1
  • 2
  • Now, this is the right time to be *specific*... when you say *"viewController"*, are you talking a `UIViewController`, a `UIView`, or a `View`? There's a *huge* difference between the first two, which are `UIKit` classes and require integration with SwiftUI, and the third, which is `SwiftUI` and a modifier like @rraphael gave you will work. –  Jun 19 '19 at 10:58
  • I'm assuming by viewController, Rakesh means the entire iPhone screen. I'm still confused if that is a window or a scene. – Ryan Oct 04 '19 at 04:49

4 Answers4

15

So far, what I have found to work best is to create a ZStack at the top of the ContentView body and have the first layer a Color, that ignores the safe area. Apple defines a Color as "a late-binding token", whatever that is, but it behaves similar to any other View.

struct ContentView: View {
  var body: some View {
    ZStack {
      Color.red
      .edgesIgnoringSafeArea(.all)

      /// Your Inner View content goes here.
      VStack {
        Text("Hello") 
      } // VStack

    } // ZStack
  } // body View
}  // ContentView

Note: Be careful about what is inside the Inner View because it can easily expand to fill the entire window thus overlaying your background color with white, etc. For example, the popular NavigationView tends to expand to the entire window and for me it tends to ignore its documented .background() setting. You can do the same ZStack strategy here too. 

NavigationView {
  ZStack { 
    Color.red.edgesIgnoringSafeArea(.all) 
    VStack {
      Text("Hello")
    } // VStack
  } // ZStack
}  // NavigationView
Ryan
  • 10,798
  • 11
  • 46
  • 60
  • 4
    This didn't work for me with NavigationView that has a List. – user1366265 Oct 20 '19 at 22:26
  • Remember that a List is a view which then is loaded on top of the NavigationView and similarly expands to fill the screen. For example, if inside your NavigationView you have List {Text("Hello")}.opacity(0.2) you will see the background shine through. Thus, you will need to style the List View itself. Here is a StackOverflow question on that: https://stackoverflow.com/questions/56517904/how-do-i-modify-the-background-color-of-a-list-in-swiftui – Ryan Oct 22 '19 at 03:01
3

If you use the background modifier (.background(Color.red)) on the top view, you just will be wrapping that view with a new view with background color red around his padding or size. So you should use a Rectangle() view and a Z stack to set a full background to the whole view, and if you need, use the .edgesIgnoringSafeArea

    NavigationView {
        ZStack { 
            Rectangle().foregroundColor(.blue).edgesIgnoringSafeArea(.all)
            ScrollView {
                List()
                    ForEach(modelExampleList) { modelExample in
                        Row(model: modelExample)
                    }
                }.frame(height: 200)
            }.padding(.leading, 10)
        }.navigationBarTitle(Text("ModelExample List"), displayMode: .large)
    }
Piero Sifuentes
  • 490
  • 4
  • 8
2

you can use below code for change whole of view controller color

ZStack {
        Color.red
        .edgesIgnoringSafeArea(.all)
    }

and use this code for change safe area background color

ZStack {
        Color.red
    }
Masoud Roosta
  • 455
  • 9
  • 19
0

I moved it out of the ZStack, then used an overlay and it worked.

var body: some View {
    NavigationView {
        sceneBackgroundColor
            .edgesIgnoringSafeArea(.all)
            .overlay(myView)
    }
}
Alex
  • 3,861
  • 5
  • 28
  • 44