Clear background for form sections in SwiftUI?

Question

I'm trying to remove the white background of some sections so the elements lay right on the grey background, but I can't get the section background to be removed or transparent.

This is what I'm trying:

struct ContentView: View {
    
    var body: some View {
        Form {
            Section {
                Text("Hello!")
                Button {
                    print("Clicked")
                } label: {
                    Text("Click Me!!")
                }
            }
            Section {
                VStack {
                    Button("Button 1") {}
                    Spacer()
                    Button("Button 2") {}
                }
            }
            .background(Color.clear) // Not doing anything
            Section {
                VStack(alignment: .leading) {
                    Text("Location")
                        .font(.headline)
                    Group {
                        Text("Abc")
                        Text("Abc")
                        Text("Abc")
                    }
                    .font(.caption)
                }
            }
        }
    }
}

This is what it looks like:

I tried to add .background(Color.clear) to the Section and VStack, but it did not have any effect. How an this be achieved in SwiftUI?

score 14 · Accepted Answer · answered Sep 17 '20 at 21:08

14

Even in SwiftUI 2 Form is built on top of UIKit, specifically UITableView.

You need to remove the default UITableViewCell's background (only once, preferably in the App init):

UITableViewCell.appearance().backgroundColor = UIColor.clear

and change the background using:

Section {
    VStack {
        Button("Button 1") {}
        Spacer()
        Button("Button 2") {}
    }
}
.listRowBackground(Color.clear)

answered Sep 17 '20 at 21:08

pawello2222

46,897
22
145
209

8

I think this would change it for all table cells globally? but still feels hacky. Color.clear really should work by itself. Instead this seems to get pretty close: `.listRowBackground(Color(.systemGroupedBackground))` – TruMan1 Sep 18 '20 at 01:56
1

@TruMan1, Form is a standard look-and-feel control. Any not officially documented change to standard control is a hack and can stop working with any system update. And if modifier has no effect to it that means it should not have. Everything else on your own risk. – Asperi Sep 18 '20 at 03:46
Hey @Asperi, could you put your solution down as an answer? I would like to upvote it as an official answer. Perhaps if enough people agree it could overtake the UITableViewCell solution. – Curious Jorge Jan 09 '23 at 20:25

score 0 · Answer 2 · answered Jan 09 '23 at 20:23

I have also been struggling with this issue. It really ought not be an issue at this point in SwiftUI's development. >:-(

Anyway, my solution so far is to put things in footer: parts of Form Sections. There will be many who (rightfully) point out it's not ideal from a semantic point of view - perhaps also affecting accessibility behaviour in a bad way. But at least it's not needing a global tweak to get that result.

Here's how the code would look for your case.

Form {
    Section {
        Text("Hello!")
        // ...
    } footer: {
        VStack {
            Button("Button 1") {}
            Spacer()
            Button("Button 2") {}
        }
    }
}

Giving this result:

Having said all that, I actually prefer the solution given by Asperi. :-)

Clear background for form sections in SwiftUI?

2 Answers2

Linked

Related