swiftui - 当前 View 后面的 View 的半透明(模糊效果，如VisualEffectView)

Question

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

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

Answer 1

苹果的方式
对 View 层次结构的调查表明，出于这个原因，Apple正在使用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)
        }
    }
}

native 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)
        }
    }
}

注意 View 的顶部和底部
注意，您可以 Group多个 View 并将它们模糊在一起。