CODEWITHSUNDEEP
iosswiftuiios14
TruMan1
TruMan1

Reputation: 36098

Clear background for form sections in SwiftUI?

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:

enter image description here

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?

Upvotes: 11

Views: 7736

Answers (4)

Amar Sagoo
Amar Sagoo

Reputation: 151

In iOS 18, you can use .listRowBackground(Color.clear) (no need to use the UITableViewCell trick mentioned in an earlier answer). I'm not sure what's the earliest iOS version where this works.

Upvotes: 0

Swornim Shah
Swornim Shah

Reputation: 69

List {
            Section {
                Text("Complex 1")
                Text("Complex 1")
            }
            
            Section {
                Text("Complex 1")
                Text("Complex 1")
            }
        }.listStyle(.plain)

Incase for all the sections

Upvotes: 0

Curious Jorge
Curious Jorge

Reputation: 1309

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:

Buttons in Footer of Form Section

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

Upvotes: 1

pawello2222
pawello2222

Reputation: 54526

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)

Upvotes: 23

Related Questions