列表部分标题的 SwiftUI 2 清除背景答案

【问题标题】：SwiftUI 2 clear background for list section header列表部分标题的 SwiftUI 2 清除背景
【发布时间】：2020-09-21 02:02:47
【问题描述】：

SwiftUI 2 破坏了我的应用程序的一部分，该部分依赖于清晰的背景作为列表部分标题。以前我依靠这一行来使列表部分清晰。有谁知道如何在 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 应该是透明的而不是灰色的。

【问题讨论】：

这可能对你有帮助：Clear background for form sections in SwiftUI?
我尝试了这个解决方案，但不幸的是，列表中没有运气:(
它确实工作，我刚刚检查过（除非我们谈论不同的事情） - 请添加Minimal, Reproducible Example。另请注意，您需要更改UITableViewCell.appearance()。
添加了示例。不幸的是，Xcode 12/Swiftui 2 中的解决方案没有运气
不清楚您在谈论列表 header - 我添加了一种可能的解决方法来解决不清晰的颜色。但是在使用默认列表样式时，您可能无论如何都不应该使用清晰的颜色（因为文本重叠）。

标签： ios swiftui swiftui-list ios14

【解决方案1】：

以下代码将为您提供一个与系统背景颜色相同的空标题，如果您想向其中添加文本，您可以将Rectangle 替换为Text("Your header")，甚至使用Stack 视图

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

               }

      }

【讨论】：

谢谢。问题是我在列表下有一张图片。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：