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 green color (and this works in the sample code).

Is there a way to make the background green on the ContentView with a Navigation View and a List, like it is on the "DetailView"?

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)  
    }  
}  

Answer 1

Thanks to Paul Hudson (hackingwithswift.com), I finally got an 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 and not needed
    }
}

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)
    }
}

Answer 2

I'm not going to call it solved, but I am a step closer and maybe someone could fix the last part of it. From the last version of the test app, I added a ZStack with a Rectangle with a green fill. I also added .colorMultiply to the List (you also have to add padding). The entire background is now green, like it should be. The issue now is that the "red" of the "cell" doesn't look red anymore. I think what is happening is that it is adding the colorMulitply to the cell as well. Can we exempt the colorMultiply to the cell?

struct ContentView: View {

    var body: some View {
        NavigationView {
            ZStack {
                Rectangle()
                    .fill(Color.green)
                    .edgesIgnoringSafeArea(.all)
                List {
                    ForEach(1...3, id: \.self) { index in
                        NavigationLink( destination: DetailView()) {
                            ContentCell()
                        }
                        .frame(height: 100)
                    }
                }
                .navigationBarTitle("My List")
                .colorMultiply(Color.green).padding(.top)
            }
        }
    }
}