SwiftUI 2 clear background for list section header

user_14312027 0
Viewed 2768

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

swiftui-list ios14 swiftui ios
4 Answers

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")
                        //...

               }

      }
user_97400920

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")
                }
            }
        }
    }
}
user_143120270

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())
    }
}
user_86977930

You can also achieve text with a background color with a custom indent like so:

           List {
                Section(
                    header:
                        ZStack(alignment: .leading) {
                            Color.white.edgesIgnoringSafeArea(.all)
                            Text("    Some Text")
                                .foregroundColor(.black)
                        }
                        .listRowInsets(EdgeInsets())
                ) {
user_82130260
Related