swift - 在 SwiftUI 中创建透明的模糊 View

Question

我的目标是创建一个模糊 View ，如下图右上角的 View 。

我试过 this post 的前 3 个答案，但它们都有相同的问题——当模糊 View 下面有多种颜色时，它只有一种颜色。这是我尝试过的解决方案之一:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack{
                ForEach(0..<20, id: \.self){ num in
                    Rectangle()
                        .frame(height: 20)
                        .padding(.vertical, 6)
                }
            }
            Blur(style:  .systemThinMaterialLight)
                .mask(
                    VStack(spacing: 0) {
                        Rectangle()
                            .frame(width: 347, height: 139)
                            .padding(.top, 0)
                        Spacer()
                    }
                )
                .allowsHitTesting(false)
        }
    }
}

struct Blur: UIViewRepresentable {
    var style: UIBlurEffect.Style = .systemMaterial
    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

如您所见，模糊 View 只是一个灰色 View 。您甚至看不到模糊 View 下的黑白条纹。

我希望模糊 View 更加透明，就像您在第一张图片中看到的那样，通过模糊 View 仍然可以看到海洋、沙滩和阴影。如何在 SwiftUI 中创建这样的 View ？

Answer 1

此代码非常接近您的问题，它仅适用于 IOS15 及更高版本:

ZStack{
  Image("background")
  //then comes your look trough button, here just a Rectangle:
  Rectangle()
 .foregroundColor(.secondary)
 .background(.ultraThinMaterial)
 .frame(width: 100, height: 100)
 //then you can add opacity to see a bit more of the background:
 .opacity(0.95)
}