SwiftUI 清除列表元素的背景
SwiftUI Clear Background on List Element
我有一个使用 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
)
}
尝试使用 .clipShape
,但很难说出您的代码的确切位置 w/o...
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 !!
我有一个使用 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
)
}
尝试使用 .clipShape
,但很难说出您的代码的确切位置 w/o...
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 !!