How can I remove background Color from section in SwiftUI?

Question

I have a SwiftUI section like so:

struct FormView: View {
    var body: some View {
        Form {
            Section {
                Button(action: {
                    
                }) {
                    HStack {
                        Spacer()
                        Text("Save")
                            .font(.headline)
                            .foregroundColor(.white)
                        Spacer()
                    }
                }
                .listRowInsets(.init())
                .frame(height: 50)
                .background(Color.blue)
                .cornerRadius(15)
            }.background(Color.clear)
        }
        //.background(Color.red)
        .background(LinearGradient(gradient: Gradient(colors: [.green, .red]), startPoint: .leading, endPoint: .trailing))
        .edgesIgnoringSafeArea(.all)
    }
}

struct WelcomeScreen: View {
    var body: some View {
        FormView().background(Color.red)
            .onAppear {
               UITableView.appearance().backgroundColor = .clear
            }
    }
}

And it looks like this:

How can I get rid of the white background color of the section? I've tried adding .background(Color.clear) but that did nothing.

score 6 · Accepted Answer · edited Aug 23 '22 at 14:39

Here is possible solution - use list row background color same to parent background.

Tested with Xcode 12.1 / iOS 14.1

struct FormView: View {
    var body: some View {
        Form {
            Section {
                Button(action: {
                    
                }) {
                    HStack {
                        Spacer()
                        Text("Save")
                            .font(.headline)
                            .foregroundColor(.white)
                        Spacer()
                    }
                }
                .listRowInsets(.init())
                .listRowBackground(Color.red)     // << here !!
                .frame(height: 50)
                .background(Color.blue)
                .cornerRadius(15)
            }
        }.background(Color.red).edgesIgnoringSafeArea(.all)
    }
}

When dealing with a non-solid color, add

            .onAppear {
               UITableViewCell.appearance().backgroundColor = UIColor.clear
            }

and set

.listRowBackground(Color.clear)

That does indeed work. I should have worked on my example a bit further though - I'm actually using a gradient for the background rather than `Color.red`. For a gradient background such as `.background(LinearGradient(gradient: Gradient(colors: [.green, .red]), startPoint: .leading, endPoint: .trailing)).edgesIgnoringSafeArea(.all)` this solution will not work (using Color.clear for `listRowBackground` does not help either). — Kyle, Dec 01 '20 at 15:16

How can I remove background Color from section in SwiftUI?

1 Answers1

Linked