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

Posted 2023-02-23

【中文标题】子视图有父级的阴影，即使有背景

【英文标题】：Subview have parent's shadow, even with a background

【发布时间】：2019-11-01 23:57:04

【问题描述】：

所以我刚开始使用 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 的影子不应该复制到子节点中，但确实如此。虽然只有第一个。有什么提示吗？

【参考方案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))

【讨论】：

有趣的是，这正是我想要做的，也谢谢，帮助很大:)

@doooouG 很高兴为您提供帮助！如果我已经回答了你的问题，你介意接受这个答案吗？

【参考方案2】：

我也是 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】：

当您必须使它们在多个通道中渲染时，您可以尝试“叠加”和“背景”技巧。在上述情况下，覆盖不会受到阴影或其他效果的影响。

如果你认为它们是 subViews，实际上它们只是在 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)