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

Posted 2023-02-24

【中文标题】列表部分标题的 SwiftUI 2 清除背景

【英文标题】：SwiftUI 2 clear background for list section header

【发布时间】：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 - 我添加了一种可能的解决方法来解决不清晰的颜色。但是在使用默认列表样式时，您可能无论如何都不应该使用清晰的颜色（因为文本重叠）。

【参考方案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())
                )