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

您可以将 a 放在LinearGradienta 的顶部VStack以实现“顶部阴影”效果。

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

    // ContinueButton()...
}

结果：