即使有背景，子视图也有父母的影子

Question

所以我刚刚开始使用 SwiftUI 进行开发，但遇到了一个小问题。即使父视图有背景，子视图也会显示父视图的阴影。有人知道如何解决这个问题吗？

HStack {
    HStack {
        [...]
    }
    .padding(.leading, 12.0)
    .padding(.trailing, 4.0)
    .padding(.vertical, 16.0)
    .background(Color("lightGreen"))
    .cornerRadius(10)
}
.padding(8)
.background(Color.white)
.shadow(color: Color("tabShadow"), radius: 0.0, x: 0.0, y: -0.5)
.shadow(color: Color("tabShadow"), radius: 0.0, x: 0.0, y: 0.5)

如前所述，第一个 HStack 的影子不应该被复制到子 HStack 中，但确实如此。不过只有第一个。任何提示？

Answer 1

尝试.compositingGroup()一下会让特质只影响父视图。

查看链接

HStack {
    HStack {
        [...]
    }
    .padding(.leading, 12.0)
    .padding(.trailing, 4.0)
    .padding(.vertical, 16.0)
    .background(Color("lightGreen"))
    .cornerRadius(10)
}
.padding(8)
.compositingGroup()
.background(Color.white)
.shadow(color: Color("tabShadow"), radius: 0.0, x: 0.0, y: -0.5)
.shadow(color: Color("tabShadow"), radius: 0.0, x: 0.0, y: 0.5)

Answer 2

某些修饰符放置在堆栈上时，由其所有子项继承。例如，如果您有一个包含一堆 Text 视图的堆栈，您可以在堆栈上放置一个 .font() 修饰符，它们都将被修改。

似乎 .shadow() 是这些修饰符之一。至于为什么只有一个被继承，我怀疑 SwiftUI 的设计者不希望 .shadow() 在特定视图上被多次调用，并且没有对此进行测试。

如果您只是想在视图的顶部和底部绘制一条彩色线，请尝试类似的方法

.background(Color.white)
.background(Color("tabShadow").offset(x: 0, y: -0.5))
.background(Color("tabShadow").offset(x: 0, y: 0.5))