Background Color of Navigation View with List View

Question

Now that we are on the GM of Xcode, I'm still not getting something basic with background color. Below is just a test app. The goal is to make the entire background green, and the "cells" red. When you click on a cell, it goes to a sample detail, and the entire background is the correct green color. I've found workarounds that will allow the Navigation view to be green, but when I add the List, it goes back to white. I was just going to get rid of List and call it good, but then the edit button doesn't work (Edit button not shown in this example).

Is there a way to make this background green on the ContentView?

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(1...3, id: \.self) { index in
                    NavigationLink( destination: DetailView()) {
                        ContentCell()
                    }
                    .frame(height: 100)
                }
            }
            .navigationBarTitle("My List")
        }.background(Color.green)// Not working
    }
}

struct ContentCell: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("An item to display.")
            }
            .frame(width: (geometry.size.width), height: geometry.size.height, alignment: .center)
            .background(Color.red)// Working
        }
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Text ("At the detail view")
        }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .background(Color.green)// Working
            .edgesIgnoringSafeArea(.all)
    }
}

SwiftUI

9.7k

Posted by

ShadowDES

Reply

Add a Comment

Answer 1

Thanks for Paul Hudson (hackingwithswift.com), I got the answer for this today. In the init, changing the tableview color takes a UIColor. The .listRowBackground uses the SwiftUI Color. If you set each of those with rgb, they will match. If you use just .green, they will be different.

struct ContentView: View {
    
    init() {
        UITableView.appearance().backgroundColor = .green // Uses UIColor
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(1...3, id: \.self) { index in
                    NavigationLink( destination: DetailView()) {
                        ContentCell()
                    }
                    .frame(height: 100)
                    .listRowBackground(Color.blue) // Uses Color
                }
            }
            .navigationBarTitle("My List")
            
        }
        //.background(Color.green)// Not working
    }
}

struct ContentCell: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("An item to display.")
            }
            .frame(width: (geometry.size.width), height: geometry.size.height, alignment: .center)
            .background(Color.red)// Working
        }
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Text ("At the detail view")
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .background(Color.green)// Working
        .edgesIgnoringSafeArea(.all)
    }
}

Posted by

ShadowDES

Add a Comment

Answer 2

Hello,

Well, same here, I tried some combinations, like colorInvert(), colorMultiply()... which does work, but not background.

Xcode is GM, but Catalina is far from ready, still one month, we can hope this kind of thing working.

Filling a bug would be right I think.

Cheers

Gerard

Posted by

igerard

Add a Comment

Answer 3

Thanks for Paul Hudson (hackingwithswift.com), I got the answer for this today. In the init, changing the tableview color takes a UIColor. The .listRowBackground uses the SwiftUI Color. If you set each of those with rgb, they will match. If you use just .green, they will be different.

struct ContentView: View {
    
    init() {
        UITableView.appearance().backgroundColor = .green // Uses UIColor
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(1...3, id: \.self) { index in
                    NavigationLink( destination: DetailView()) {
                        ContentCell()
                    }
                    .frame(height: 100)
                    .listRowBackground(Color.blue) // Uses Color
                }
            }
            .navigationBarTitle("My List")
            
        }
        //.background(Color.green)// Not working
    }
}

struct ContentCell: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("An item to display.")
            }
            .frame(width: (geometry.size.width), height: geometry.size.height, alignment: .center)
            .background(Color.red)// Working
        }
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Text ("At the detail view")
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .background(Color.green)// Working
        .edgesIgnoringSafeArea(.all)
    }
}

Posted by

ShadowDES

Add a Comment

Answer 4

For me it was .scrollContentBackground(.hidden)

struct ContentView: View {

init() {
    UITableView.appearance().backgroundColor = .green // Uses UIColor
}

var body: some View {
    NavigationView {
        List {
            ForEach(1...3, id: \.self) { index in
                NavigationLink( destination: DetailView()) {
                    ContentCell()
                }
                .frame(height: 100)
                .listRowBackground(Color.blue) // Uses Color
            }
        }
        .navigationBarTitle("My List")
        .scrollContentBackground(.hidden)// Add this
        .background(Color.red)// Working
    }
    //.background(Color.green)// Not working
}

}

struct ContentCell: View { var body: some View { GeometryReader { geometry in VStack { Text("An item to display.") } .frame(width: (geometry.size.width), height: geometry.size.height, alignment: .center) .background(Color.red)// Working } } }

struct DetailView: View { var body: some View { VStack { Text ("At the detail view") } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) .background(Color.green)// Working .edgesIgnoringSafeArea(.all) } }

Posted by

DusanSpasojevic

Add a Comment

Background Color of Navigation View with List View

Accepted Reply

Replies