列表元素上的 SwiftUI 清除背景

Posted 2023-02-24

【中文标题】列表元素上的 SwiftUI 清除背景

【英文标题】：SwiftUI Clear Background on List Element

【发布时间】：2021-02-12 19:45:45

【问题描述】：

我有一个使用 ForEach 生成卡片视图的列表。它们应该有清晰的背景，但其中一个总是有白色背景，我不知道如何改变它。我尝试将.background(Color.clear) 放在我能想到的任何视图上，以及使用.listRowBackground(Color.clear)，但一个视图仍然有背景，尽管它与其他所有视图相同。

这是一张图片来说明我在说什么：

这里是navigationView的主体代码：

NavigationView
            List
                //loop through task cards
                ForEach(self.tasks, id: \.id)  task in
                    //show task card
                    task
                        .listRowBackground(Color.clear)
                        .background(Color.clear)
                
                .listRowBackground(Color.clear)
                .listStyle(SidebarListStyle())
                .environment(\.defaultMinListRowHeight, 120).padding(0.0)
                
            //LIST end
            
            .listStyle(SidebarListStyle())
            .environment(\.defaultMinListRowHeight, 120).padding(0.0)
            .background(Color.clear)
            
        //NAVIGATION VIEW end
        .background(Color.clear)
        .stackOnlyNavigationView()

这是出现在上述 ForEach 中的视图主体的代码（称为“任务”）：

GeometryReader geo in
    RoundedRectangle(cornerRadius: 10)
        .foregroundColor(Color.lightAccent)
        .background(Color.clear)
        .frame(height: self.height)
        .overlay(
            HStack
                //blah blah blah probably not important to the issue
                //if it is let me know and I will edit

            //HSTACK
            .frame(width: geo.size.width, height: self.height)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke((self.id == self.selectionManager.id) ? Color.blue : Color.mid, lineWidth: (self.id == self.selectionManager.id) ? 3 : 1))
                          .background(Color.clear)
                          .foregroundColor(Color.clear)
                //OVERLAY end
                )
    

【问题讨论】：

.background 不适用于 List 或 NavigationView。它在你的布局中。调试需要最小的可重现示例。你能详细说明一下吗？

很高兴知道这一点。 .listRowBackround 怎么样？那不应该工作吗？另外，您还想了解有关布局的哪些信息？

【参考方案1】：

尝试使用.clipShape，但如果没有您的代码，很难说出确切的位置...

GeometryReader geo in
    RoundedRectangle(cornerRadius: 10)
        .foregroundColor(Color.lightAccent)
        .background(Color.clear)
        .frame(height: self.height)
        .overlay(
            HStack
                //blah blah blah probably not important to the issue
                //if it is let me know and I will edit

            //HSTACK
            .frame(width: geo.size.width, height: self.height)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke((self.id == self.selectionManager.id) ? Color.blue : Color.mid, lineWidth: (self.id == self.selectionManager.id) ? 3 : 1))
                          .background(Color.clear)
                          .foregroundColor(Color.clear)
                //OVERLAY end
                )
               .clipShape(RoundedRectangle(cornerRadius: 10))     // << here !!
    
    .clipShape(RoundedRectangle(cornerRadius: 10))     // << or here !!

【讨论】：

我尝试在这两个地方以及列表元素上添加它，但都没有帮助。此外，我注意到，如果我在列表中滚动，一些背景开始出现在列表的其他元素上，而这些元素以前不存在

我很尴尬地说，回顾我将clipShape应用于错误视图的项目。这是正确答案，谢谢。