SwiftUI how to make List and Section transparent

Viewed 524

I'm trying to make a list that looks something like this:

enter image description here

However no matter what I try, I can't figure out how to make both the List and the Sections have a .clear background, and it currently looks like this:

enter image description here

I have tried adding .background(Color.clear) to both the List and Section, with no luck. When I use any other color than clear, it does change just fine. But it seems like there's something "behind" that background color that makes it still show white and gray underneath...

How do I change this list to be completely clear?

Here is my current failed attempt:

var body: some View {
        NavigationView {
            List {
                ForEach(uniqueEntries, id: \.self) { category in
                    Section(header: HStack {
                        Text(category)
                            .font(.headline)
                            .foregroundColor(.white)
                            .padding()
                        Spacer()
                    }
                        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                        .background(Color.clear)
                    ) {
                        ForEach(self.entriesCollatedByCategory[category]!) { entry in
                            ExpenseRow(entry: entry)
                                .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                                .listRowBackground(Color.clear)
                            
                                
                        }
                    }
                }
            }
            .padding()
            .background(Image("tempGradientBackground")
                            .resizable()
                            .aspectRatio(contentMode: .fill))
            .navigationBarTitle(Text("Budget"))
        }.background(Color.clear)
    }
2 Answers

But it seems like there's something "behind" that background color that makes it still show white and gray underneath...

Try removing UITableView and UITableViewCell background colors as well:

UITableView.appearance().backgroundColor = .clear
UITableViewCell.appearance().backgroundColor = .clear

Inside the init add the appearance style

init() {
    UITableViewCell.appearance().backgroundColor = .clear
    UITableView.appearance().backgroundColor = .clear
    UITableView.appearance().sectionIndexBackgroundColor = .clear
}

And you need to change the ListStyle aswell to make the SectionBackground transparent

.listStyle(GroupedListStyle())

Edit: Even better to use InsetGroupedList in your case. Thanks to pawello22222

.listStyle(InsetGroupedListStyle())
Related