ios - SwiftUI - 在具有透明度的 View 上剪切阴影

Question

如何使用 SwiftUI 在具有透明背景的 View 上剪切阴影？

我想要实现的是有可能在 RoundedRectangle 之外剪裁阴影，而不在其中显示阴影。(你可以看到 - “文本”有一些黑色背景，这是阴影)

我尝试实现的目标:(使用 CSS 实现)- 内部背景具有透明度

我的结果:

Text("Text") 
        .multilineTextAlignment(.leading)
        .padding(EdgeInsets(top: 8, leading: 14, bottom: 8, trailing: 14))
        .font(.system(size: 13, weight: .medium, design: .default))
        .overlay(RoundedRectangle(cornerRadius: 10, style: .continuous)
                .fill(Color.init(Color.RGBColorSpace.sRGB, white: 1, opacity: 0.2))
                .shadow(color: Color.black, radius: 6, x: 0, y: 3)).padding(30)

Answer 1

如果还可以具有某种模糊效果，您可以使用呈现 UIBlurEffect 的 View 作为文本的背景。您仍然会获得透明效果，但现在有一个不会弄乱阴影的不透明 View 。

代码:

ZStack {
    Color.blue
    Text("Hello, World!")
        .padding(7)
        .background(BlurView(style: .systemUltraThinMaterial))
        .clipShape(RoundedRectangle(cornerRadius: 10.0))
        .shadow(color: Color.black.opacity(0.5), radius: 6, x: 0, y: 3)
}

结果:

而 BlurView 只是 UIVisualEffectView 的 SwifUI 包装器

struct BlurView: UIViewRepresentable {
    typealias UIViewType = UIVisualEffectView
    
    let style: UIBlurEffect.Style
    
    init(style: UIBlurEffect.Style = .systemMaterial) { self.style = style }
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}