SwiftUI List color background
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)
}
}
All SwiftUI's List
s are backed by a UITableView
in iOS. so you need to change the background color of the tableView. You make it clear
so other view
s 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 Color
s) 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
@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())
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)