SwiftUI List color background

Question

I can't change background color of a view if i List static items. this my code:

NavigationView {
    ZStack {
        Color("AppBackgroundColor").edgesIgnoringSafeArea(.all)
        List {
            Section(header: Text("Now in theaters")) {
                ScrollMovies(type: .currentMoviesInTheater)
            }
            Section(header: Text("Popular movies")) {
                ScrollMovies(type: .popularMovies)
            }
        }.listStyle(.grouped)
    }
}

Answer 1

All SwiftUI's Lists are backed by a UITableViewin iOS. so you need to change the background color of the tableView. You make it clear so other views will be visible underneath it:

struct ContentView: View {
    
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
        
    var body: some View {
        Form {
            Section(header: Text("First Section")) {
                Text("First cell")
            }
            Section(header: Text("Second Section")) {
                Text("First cell")
            }
        }
        .background(Color.yellow)
    }
}

Now you can use Any background (including all Colors) you want

Note that those top and bottom white areas are the safe areas and you can use the .edgesIgnoringSafeArea() modifier to get rid of them.

Also note that List with the .listStyle(GroupedListStyle()) modifier can be replaced by a simple Form. But keep in mind that SwiftUI controls behave differently depending on their enclosing view.

Also you may want to set the UITableViewCell's background color to clear as well for plain tableviews

Answer 2

@State var users: [String] = ["User 1",
                              "User 2",
                              "User 3",
                              "User 4"]

init(){
    UITableView.appearance().backgroundColor = .red
    UITableViewCell.appearance().backgroundColor = .red
    UITableView.appearance().tableFooterView = UIView()
}

var body: some View {
    List(users, id: \.self){ user in
        Text(user)
    }
    .background(Color.red)
}

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())