NEW: Start my new Ultimate Portfolio App course with a free Hacking with Swift+ trial! >>

SOLVED: Background Color not working in ZStack.

Forums > SwiftUI

I thought I understood how to use a ZStack to do this but it does not seem to work in my code below.

I cannot get the entire screen to paint behind the List View or the Navigation Title in my "BackgroundColor". I have tried standard colors like .blue as well but that does not work either. The aim is to have everything set on a background color.

import Combine
import SwiftUI

struct ContentView: View {
    @State var popUpKeys = Keys()
    @State var isShowing = false
    @StateObject var forecastListVM = ForecastListVM()
    @Environment(\.colorScheme) var colorScheme // Dark or Light Mode

    var body: some View {
        ZStack {
            Color("BackgroundColor").ignoresSafeArea(.all)  // Tried with no ignore modifier and edges: option. Neither works.
      // Also tried Color.gray - does not work. 
            NavigationView {
                VStack {
                    Text("Testing...")
                        .font(.title)
                    List(forecastListVM.forecasts, id: \.dayNumber) { day in
                        VStack {
                            WeatherSummaryView(day: day)
                            HStack {
                                DateRectangleView(day: day)
                                Weather![](https://)ImageView(day: day)
                            }
                            HStack {
                                Column1SymbolsView(day: day)
                                Column2DataView(day: day)
                                Column3SymbolsView(day: day)
                                Column4DataView(day: day)
                                Column5SymbolsView(day: day)
                                Column6DataView(day: day)
                            }
                        }
                        .background(Color("BackgroundColor"))
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                    }
                    .listStyle(PlainListStyle())
                }
                .navigationTitle(K.navTitle)
                .background(Color("BackgroundColor")) // Not working either
            } // End of NavigationView
        } // End of ZStack
    } // End of Body: some View
} // End of Struct

I tried to insert a screenshot of the current screen but could not get the following to work. Surely something to do with my path? My attempt: (/Users/bak/Background\ Color.png)

   

Do you have a Color set "BackgroundColor" in the Assert.xcassets?

Did this and worked fine

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

            Text("Hello, world!")
                .padding()
        }
    }
}

   

Yes, and thanks for the reply!

I do have that set in my Asset Catalog. I also tried testing with Color.blue. Neither option works.

And I agree with your example. That is exactly how I thought this was done. Has to be something offending in one of my Views?

If anyone can tell me how to link to a path on my iMac to show my screen shot I think it will be easier to solve.

My path is "Macintosh HD Data/Users/bak/Background\ Color.png"

(This is my first post here and obviously I had some issues posting LOL)

Thanks in advance!

   

Both NavigationView and Color conform to View, meaning they are views, so as written your NavigationView was overlaid completely over the Color view.

I think that the ZStack should be inside the NavigationView. Hopefully the code below will give you some ideas on how to modify your code.

struct ContentView: View {

    let aList = ["Abc", "Def", "Ghi"]

    var body: some View {
        NavigationView {

            ZStack{

                Color(.blue)
//                    .edgesIgnoringSafeArea(.all)
                    .edgesIgnoringSafeArea(.bottom)

                VStack(alignment: .center){

                    Text("Some Text")
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .frame(width: 150)

                    List{
                        ForEach(aList, id: \.self) { item in
                            Text(item)
                                .frame(width: 200, height: 100)
                                .background(Color.red)
                                .foregroundColor(.white)
                        }
                    }
                }
                .background(Color.purple)
                .frame(width: 250, height: 550)
            }
        }
    }
}

   

Perfect! And to think that I just listened to Paul telling us that Color is a View! Your example was very easy to understand.

I have been fighting this for several days on and off. I actually thought about reversing the ZStack and NavigationView earlier but had not done it yet and would not have learned the reason why it helped without your help. Thanks a million @Greenamberred!

   

Hacking with Swift is sponsored by Instabug

SPONSORED Catch bugs as soon as they happen and know exactly why a crash occurred. Instabug's SDK grabs all the logs they need to fix bugs, crashes and performance issues in minutes instead of days. Get screenshots, device details, network logs, repro steps, and tons of other critical insights needed to resolve issues and prioritize product backlogs straight from your dashboard. It only takes a minute to integrate!

Get started now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.