Transparent section header?

Question

I'm creating a transparent List with transparent rows and section headers.

But as soon as the rows slide under the section header, it automatically features a background blur. I understand the sentiment, but would like to opt out.

Did anyone manage to hide it somehow? Leaving the section header background entirely transparent?

struct HeaderView: View {
        
    var body: some View {
        ZStack {
            Image("Map")
                .opacity(0.5)
            List {
                Section(
                    header: VStack {
                        Text("Section 1")
                            .font(.system(size: 40))
                            .frame(height: 60)
                    },
                    content: {
                        ForEach(1...20, id: \.self) { eachRowIndex in
                            Text("Row \(eachRowIndex)")
                                .listRowBackground(Color.clear)
                        }
                    }
                )
            }
            .listStyle(.plain)
            .padding(.top, 40)
        }
    }
}

Preferably iOS 13 SwiftUI, but I'm curious if there is anything to do with it in UIKit as well.

score 3 · Accepted Answer · answered Mar 18 '22 at 12:11

3

Add empty view to UITableViewHeaderFooterView

struct HeaderView: View {
    init() {
        UITableViewHeaderFooterView.appearance().backgroundView = UIView() // here
    }

// Other code

answered Mar 18 '22 at 12:11

Raja Kishan

16,767
2
26
52

Perfect, thanks! I tried setting `backgroundView` to `nil` already, but that did not work out. – Geri Borbás Mar 18 '22 at 12:15

score 0 · Answer 2 · answered Mar 19 '22 at 13:25

For iOS 13, I needed to introspect UITableViewHeaderFooterView, and set backgroundView manually there (which needs an Introspect extension as well).

struct ContentView: View {
    
    init() {
        UITableViewHeaderFooterView.appearance().backgroundView = UIView()
    }
    
    var body: some View {
        List {
            Section(
                header: HStack {
                    ...
                }
                .introspectTableViewHeaderFooterView {
                    $0.backgroundView = UIView()
                },
                
                content: {
                    ForEach { 
                        ...
                    }
                }
            )
        }
        .listStyle(.plain)
    }
}

extension View {
    
    public func introspectTableViewHeaderFooterView(customize: @escaping (UITableViewHeaderFooterView) -> Void) -> some View {
        introspect(selector: TargetViewSelector.ancestorOrSiblingContaining, customize: customize)
    }
}

Transparent section header?

2 Answers2