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的影子不应复制到子级中，而应复制到子级中。虽然只有第一个。有提示吗？

Answer 1

某些修饰符放在堆栈中时，会被其所有子级继承。例如，如果您有一个包含一堆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))

Answer 2

当您需要使它们以多遍渲染时，可以尝试使用“叠加”和“背景”技巧。在上述情况下，叠加层将不受阴影或其他效果的影响。

如果您认为它们是subView，则实际上它们只是在superView之后呈现。这是2D世界。因此，覆盖图将非常独立。

唯一的问题就是覆盖层的大小。

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)
    }
}

即使具有背景，子视图也具有父级的阴影

3 个答案: