How can I remove background Color from section in SwiftUI?

user_127853 0
Viewed 2030

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:

Button

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

swiftui
1 Answers

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

Tested with Xcode 12.1 / iOS 14.1

demo

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)

user_122990300
Related