SwiftUI 2 clear background for list section header

Question

SwiftUI 2 broke a part of my app that relied on a clear background for a List section header. Previously I relied on this line to make the list sections clear. Does anyone know how to accomplish this in SwiftUI 2?

UITableViewHeaderFooterView.appearance().tintColor = .clear

Here is a sample that would work in SwiftUI 1:

struct ContentView: View {

    var body: some View {
        List {
            Section(header:
                Text("List Header")
            ) {
                Text("Hi")
            }
            .listRowBackground(Color.clear)
        }
        .onAppear {
            UITableViewCell.appearance().backgroundColor = UIColor.clear
            UITableViewHeaderFooterView.appearance().tintColor = .clear
        }
    }
}

Desired: List Header should be transparent and not grey.

Screenshot

This might help you: [Clear background for form sections in SwiftUI?](https://stackoverflow.com/questions/63945992/clear-background-for-form-sections-in-swiftui) — pawello2222, Sep 21 '20 at 07:33
I tried that solution, and unfortunately no luck on lists :( — Ebby Amir, Sep 21 '20 at 14:40
It *does* work, I've just checked (unless we're talking about different things) - please add a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). Also note you need to change the `UITableViewCell.appearance()`. — pawello2222, Sep 21 '20 at 14:50
Example added. Unfortunately no luck with that solution in Xcode 12/Swiftui 2 — Ebby Amir, Sep 21 '20 at 15:35
It wasn't clear you were talking about the list *header* - I added a possible workaround for non-clear colours. But when using the default list style you probably shouldn't use the clear colour anyway (because of text-overlapping). — pawello2222, Sep 21 '20 at 15:58

score 4 · Accepted Answer · answered Sep 23 '20 at 00:43

Solution found! The trick is to use a LazyVStack with pinned sections:

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews:[.sectionHeaders]) {
                Section(header: Text("List Header")) {
                    Text("Hi")
                    Text("Hi")
                    Text("Hi")
                }
            }
        }
    }
}

score 2 · Answer 2 · answered Sep 21 '20 at 18:56

the following code will give you an empty header with the same background colour as the system if you want to add a text to it you can replace Rectangle by Text("Your header") or even use a Stack View

List {
                
                Section(header:
                            Rectangle()
                            .foregroundColor(.clear)
                            .listRowInsets(EdgeInsets())
                            .background(Color(.systemBackground))){
         
                        //content of the list
                        Text("Item x")
                        //...

               }

      }

Thanks. The problem is I have an image under the list. – Ebby Amir Sep 21 '20 at 22:00 — Ebby Amir, Sep 21 '20 at 22:00

pawello2222 · Answer 3 · 2020-09-21T16:00:13.123

Here is a possible workaround (does not work with the clear color though):

struct ContentView: View {
    var body: some View {
        List {
            Section(header: header) {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
            Section(header: header) {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
        }
    }

    var header: some View {
        HStack {
            Text("Header")
            Spacer()
        }
        .padding(5)
        .background(Color.blue)
        .listRowInsets(EdgeInsets())
    }
}

SwiftUI 2 clear background for list section header

3 Answers3