Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the background color for a Form in SwiftUI?

Tags:

ios

swiftui

I wanna change that "light gray" background color for a form, but .foregroundColor(Color.blue) and .background(Color.blue) does not seem to work

struct ContentView : View {

 @State var value = ""

    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField($value)
            }
            Section(header: Text("Last Name")) {
                TextField($value)
            }
        }.foregroundColor(Color.blue)

    }
}

enter image description here

like image 424
Sorin Lica Avatar asked Jul 29 '19 13:07

Sorin Lica


3 Answers

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 Lists are backed by a UITableViewin 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 Colors) you want

Preview

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.

like image 99
Mojtaba Hosseini Avatar answered Oct 19 '22 15:10

Mojtaba Hosseini


try this

.onAppear {
   UITableView.appearance().backgroundColor = .blue
}
like image 9
Paloma Bispo Avatar answered Oct 19 '22 14:10

Paloma Bispo


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.

like image 8
Vince O'Sullivan Avatar answered Oct 19 '22 14:10

Vince O'Sullivan