当前视图后面的视图的半透明（模糊之类的VisualEffectView）

Question

在SwiftUI中，TabView中选项卡栏后面的视图将照亮，就像选项卡栏的背面是毛玻璃一样。 Apple在自己的应用程序中到处都使用这种外观。但是如何将其添加到SwiftUI的视图中？

这是Podcasts应用程序中的一个示例。标签栏具有磨砂玻璃效果。标签栏顶部的叠加式迷你播放器也是如此。默认情况下，TabView中的任何选项卡栏都会具有这种外观，但不会具有关联的叠加层（在这种情况下为迷你播放器）。

Answer 1

苹果方式

对视图层次结构的调查表明，出于这个原因，苹果公司正在使用UIKit和UIVisualEffectView。您可以仅用5行代码来定义VisualEffectView：

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

用法示例：

struct ContentView: View {

    var body: some View {
        ZStack {
            Image("BG")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)

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

            Text("Hello \nVisual Effect View")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(.white)
        }
    }
}

---

原生SwiftUI方式：

您可以在任何需要模糊的地方添加.blur()修饰符，例如：

struct ContentView: View {

    var body: some View {
        ZStack {
            Image("BG")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
                .blur(radius: 20) // <- this is the important modifier. The rest is just for demo

            Text("Hello \nSwiftUI Blur Effect")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(.white)
        }
    }
}

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

请注意，您可以Group多个视图并将它们模糊在一起。