Background Color of Navigation View with List View

Question

Created Sep ’19

Replies 3

Boosts 0

Views 12k

Participants 3

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

Answered by ShadowDES in 386512022

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

Boost

Answer 1

igerard OP

Sep ’19

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

0

Answer 2

ShadowDES OP

Oct ’19

Accepted Answer

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

4

Answer 3

DusanSpasojevic OP

Apr ’24

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

0

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

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