SwiftUI - 如何只在顶部显示阴影？

Question

我正在尝试为我的 VStack（仅在顶部）添加阴影，但是当我喜欢下面的阴影时，所有方面都可以看到阴影，例如按钮、文本。 但我试图只给容器边界。

.background(Color.white // any non-transparent background
               .shadow(color: Color.red, radius: 10, x: 0, y: 0)
             )

我想要如下的用户界面

谢谢你的帮助

Answer 1

尝试使用mask(_:)修饰符，如本答案所示。

.background(
    Color.white // any non-transparent background
        .shadow(color: Color.red, radius: 10, x: 0, y: 0)
        .mask(Rectangle().padding(.top, -20)) /// here!
)

结果：

Answer 2

您可以在VStack的顶部放置一个LinearGradient以实现“顶部阴影”效果。

VStack(spacing: 0) {
   LinearGradient(colors: [.white, Color(.sRGB, white: 0.85, opacity: 1)], startPoint: .top, endPoint: .bottom)
       .frame(height: 6)
       .opacity(0.8)

    // Button()...
}

结果：

Answer 3

因为您只希望阴影出现在顶部，所以最好使用.shadow的偏移值。 我建议将它移动大约两倍的半径。

像这样：

.shadow(color: Color.red, 
        radius: 10, 
        x: -20, // Horizontal offset
        y: 0) // Vertical offset

Answer 4

.shadow(color: Color.black, 
        radius: 5, 
        x: 5, // (left shadow "-X" & right shadow "+X")
        y: -5) // (top shadow "-Y" & bottom shadow "+Y")