How to change the background color for a Form in SwiftUI?
try this
.onAppear {
UITableView.appearance().backgroundColor = .blue
}
iOS 16
You can hide the default background to show the underling view by appealing the following modifier to the Form
:
.scrollContentBackground(.hidden)
iOS 13 and 15
All SwiftUI's List
s are backed by a UITableView
in iOS. so you need to change the background color of the tableView. But since Color
and UIColor
values are slightly different, you can get rid of the UIColor
.
struct ContentView: View {
init(){
UITableView.appearance().backgroundColor = .clear
}
@State var value = ""
var body: some View {
Form {
Section(header: Text("First Name")) {
TextField("First Name", text: $value)
}
Section(header: Text("Last Name")) {
TextField("Last Name", text: $value)
}
}
/*.scrollContentBackground(.hidden)*/ // ð this line will work only on iOS 16 and above
.foregroundColor(Color.blue)
.background(Color.yellow)
}
}
Now you can use Any background (including all Color
s) you want
Note that those top and bottom white areas are safe are and you can use .edgesIgnoringSafeArea()
modifier to get rid of them.
Restore
Since UITableView.appearance().backgroundColor
applies globally, you can use .onAppear
modifier to change it in different views (since it is a global change). So you can use another onAppear
or onDisappear
to reset it back to what you want.
And the default colors are:
UIColor.systemGroupedBackground
for the grouped style. And
UIColor.systemBackground
for the plain style.
And they both have automatic support for both dark mode and light mode.
The accepted answer by Mojtaba Hosseini, above, works but the init() statement is not a good place for the UITableView
statement. This is because it "hard codes" the ContentView's init parameters. In this case it has none so everything works but if an @ObservedObject
was added to the view then this would break the init function.
Much simpler just to add the UITable statement to the body
, explicitly return the Form
and delete the init()
.
var body: some View {
UITableView.appearance().backgroundColor = .clear
return Form {...}
}
However, setting the background colour on the Form
usually works as expected. The fact that it is not working on the ContentView
screen may be a bug.
Don't change the global appearance()
.
You can use UITableView.appearance().backgroundColor = .red
for example to set the Form
's background color to red. This can go in the init
of the view, however this affects every List
and Form
.
Alternatively, you could use SwiftUI-Introspect to customise a single one by doing something like:
struct ContentView: View {
@State private var value = ""
var body: some View {
Form {
Section(header: Text("First Name")) {
TextField("First", text: $value)
}
Section(header: Text("Last Name")) {
TextField("Last", text: $value)
}
}
.introspectTableView { $0.backgroundColor = .systemBlue }
.foregroundColor(Color.blue)
}
}
You can also add the following to each section to make the sections blue too:
.listRowBackground(Color.blue)