如何在 SwiftUI 中使用自定义半径（不使用 UIBlurEffect）模糊下面的视图？

Question

我正在尝试在 SwiftUI 中创建磨砂玻璃效果。我有一个背景图像和顶部的矩形。我想模糊矩形所在的图像。我基本上是在尝试实现玻璃态射外观，但我还没有找到任何在线方法。我不能使用 UIBlurEffect 因为我不相信有任何方法可以设置我需要设置的模糊半径。我也不能在矩形上使用模糊修改器，因为它只会模糊矩形而不是下面的图像。提前致谢。

编辑：

到目前为止我的代码：

import SwiftUI

struct ContentView: View {
    
    @State private var offset = CGSize.zero
    
    var body: some View {
        ZStack {
            
            Image("background")
            
            Image("background")
                .frame(width: 300, height: 180)
                .mask(Rectangle().frame(width: 300, height: 180))
                .blur(radius: 5, opaque: true)
                .brightness(0.2)
                .offset(offset)
                .gesture(
                    DragGesture()
                        .onChanged { gesture in
                            self.offset = gesture.translation
                        }
                )
            
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

同样的两个View的ZStack，一个模糊，一个不模糊。您还将.mask 应用于顶视图以将模糊限制在您想要的区域。

你会想要使用

.blur(radius: someValue, opaque: true)
.brightness(someValue)

可能还有blendMode 和Color(.systemBackground) 的ZStack 中的第三层，带有一些不透明度。

一定要在明暗处测试效果。

Answer 2

您有 3 个简单的选项可以在 SwiftUI 中获得简单的模糊视图：

---

选项 1：

使用 iOS 材料（来自 iOS 15）

在 iOS 中，有一个名为 Material 的预定义模糊视图，这正是您正在寻找的。在 SwiftUI 中，您可以像这样使用它们：

.background(.ultraThinMaterial)

---

选项 2：

使用视觉效果视图（用于 UIKit）

您可以从 UIKit 中带上级长UIVisualEffectView：

VisualEffectView(effect: UIBlurEffect(style: .dark))

有了这个小结构：

struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView { UIVisualEffectView() }
    func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) { uiView.effect = effect }
}

_{上面的例子使用了深色版本，你可以为你的用例使用浅色版本}

选项 3：

使用blur 修饰符

只需在需要模糊的任何内容上添加.blur() 修饰符：

Image("BG")
   .blur(radius: 20)

_{注意视图的顶部和底部}

对于您的用例，您可能希望复制图像并模糊顶部的图像以产生玻璃错觉。