当前视图后面的视图的半透明（像 VisualEffectView 那样模糊）

Question

在 SwiftUI 中，TabView 中标签栏后面的视图将透出光来，就好像标签栏的背面是磨砂玻璃一样。Apple 在他们自己的应用程序中到处使用这种外观。但是如何将它添加到 SwiftUI 的视图中？

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

Answer 1

苹果方式

对视图层次结构的调查表明 Apple 正在使用UIKit和UIVisualEffectView出于这个原因。VisualEffectView只需 5 行代码就可以定义一个：

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多个视图合并在一起。

iOS 15 - 苹果材质

您可以使用一行代码使用 iOS 预定义材料：

.background(.ultraThinMaterial)