SwiftUI 2 清除列表部分的背景 header

Question

SwiftUI 2 破坏了我的应用程序的一部分，该部分依赖于列表部分的清晰背景 header。以前我依靠这一行来使列表部分清晰。有谁知道如何在 SwiftUI 2 中完成此操作？

UITableViewHeaderFooterView.appearance().tintColor = .clear

这是一个可以在 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
        }
    }
}

期望：List Header 应该是透明的而不是灰色的。

Answer 1

这是一个可能的解决方法（但不适用于清晰颜色）：

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

Answer 2

下面的代码会给你一个空的 header 和系统相同的背景颜色如果你想向它添加文本你可以用 Text("Your header") 替换 Rectangle 或甚至使用 Stack 视图

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

               }

      }

Answer 3

已找到解决方案！诀窍是使用带有固定部分的 LazyVStack：

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

Answer 4

您还可以使用自定义缩进实现具有背景颜色的文本，如下所示：

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

SwiftUI 2 清除列表部分的背景 header

SwiftUI 2 clear background for list section header

ios

swiftui

swiftui-list

ios14