问题描述
我有一个使用 ForEach 生成卡片视图的列表。它们本来应该有一个清晰的背景,但其中一个总是有白色背景,我不知道如何改变它。我曾尝试将 .background(Color.clear)
放在我能想到的任何视图上,以及使用 .listRowBackground(Color.clear)
,但一个视图仍然会有背景,尽管它与所有其他视图相同。
这是一张图片来展示我在说什么:
这里是导航视图主体的代码,它们出现在:
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
)
}
解决方法
尝试使用 .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 !!