子视图有 parent 的阴影，即使有背景

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 的影子不应复制到 child 中，但确实如此。虽然只有第一个。有什么提示吗？

Answer 1

某些修饰符在堆叠时会被其所有子项继承。例如，如果你有一个包含一堆文本视图的堆栈，你可以在堆栈上放置一个 .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))

Answer 2

当您必须让它们分多次渲染时，您可以尝试 'overlay' 和 'background' 技巧。在上述情况下，叠加层不会受到阴影或其他效果的影响。

如果你认为它们是subView，其实它们只是在superView之后渲染。这是一个二维世界。所以叠加层将是完全独立的。

唯一的问题是叠加层的大小。

这里使用hidden()来占据隐藏覆盖的位置。掌握这些排版技巧就很爽了

struct ContentView: View {

var body: some View {

HStack {
    SubContentView().hidden()
}
.padding(8)
.background(Color.white)
.shadow(color: Color.red, radius: 0, x: 0.0, y: -0.5)
.shadow(color: Color.red, radius: 0, x: 0.0, y: 0.5)

.overlay(SubContentView())

}
}

struct SubContentView: View {
var body: some View {
    HStack{
               Text("a")
                Text("b")
                Text("c")
               Text("a")
               Text("b")
               Text("c")
           }.padding(.leading, 12.0)
           .padding(.trailing, 4.0)
           .padding(.vertical, 16.0)
           .background(Color.green)
           .cornerRadius(10)
}
}

Answer 3

我也是 swiftUI 的新手，但我认为问题与修饰符顺序以及它们更改视图类型的事实有关。

我能够通过在阴影修饰符之前添加 .background(Color.white) 和 .cornerRadius(2.0) 修饰符来解决问题，并在父视图（而非子视图）中应用更改。

struct TestSwiftUIView: View {    
    var body: some View {
        VStack {
            Text("Hello World")
            Text("Hello World")
        }
        .padding()
        .background(Color.white)
        .cornerRadius(2.0)
        .shadow(radius: 3)
    }
}

子视图有 parent 的阴影，即使有背景

Subview have parent's shadow, even with a background

iphone

ios

ios13

swiftui