在 SwiftUI 中创建透明模糊视图

Question

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

\n

我已经尝试了这篇文章的前 3 个答案，但它们都有相同的问题\xe2\x80\x94，当模糊视图下面有多种颜色时，它只有 1 种颜色。这是我尝试过的解决方案之一：

\n

import SwiftUI\n\nstruct ContentView: View {\n    var body: some View {\n        ZStack {\n            VStack{\n                ForEach(0..<20, id: \\.self){ num in\n                    Rectangle()\n                        .frame(height: 20)\n                        .padding(.vertical, 6)\n                }\n            }\n            Blur(style:  .systemThinMaterialLight)\n                .mask(\n                    VStack(spacing: 0) {\n                        Rectangle()\n                            .frame(width: 347, height: 139)\n                            .padding(.top, 0)\n                        Spacer()\n                    }\n                )\n                .allowsHitTesting(false)\n        }\n    }\n}\n\nstruct Blur: UIViewRepresentable {\n    var style: UIBlurEffect.Style = .systemMaterial\n    func makeUIView(context: Context) -> UIVisualEffectView {\n        return UIVisualEffectView(effect: UIBlurEffect(style: style))\n    }\n    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {\n        uiView.effect = UIBlurEffect(style: style)\n    }\n}\n

\n

\n

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

\n

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

\n

Answer 1

此方法对视图应用高斯模糊。

func blur(radius: CGFloat, opaque: Bool = false) -> some View

参数：

• radius：模糊的径向尺寸。当模糊的半径较大时，模糊会更加分散。
• opaque：一个布尔值，指示模糊渲染器是否允许模糊输出透明。设置true为创建不透明模糊，或设置false为允许透明度。

Image("your_Image")
   .resizable()
   .frame(width: 300, height: 300)
   .blur(radius: 20)