SwiftUI List color background SwiftUI List color background swift swift

SwiftUI List color background


@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())


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

Preview

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


List cannot be "painted". Please use the following instead:

List of items:

ForEach(items) { item in    HStack {        Text(item)    }}.background(Color.red)

Scrollable list of items:

ScrollView {    ForEach(items) { item in        HStack {            Text(item)        }    }.background(Color.red)}

In your case:

VStack { // or HStack for horizontal alignment    Section(header: Text("Now in theaters")) {        ScrollMovies(type: .currentMoviesInTheater)    }    Section(header: Text("Popular movies")) {        ScrollMovies(type: .popularMovies)    }}.background(Color.red)