SwiftUI 选项卡栏模糊其后面的内容

Question

我试图模糊底部标签栏后面出现的内容，使其具有半透明/玻璃态效果。

这就是我想要实现的目标（来自Figma）：

类似于 Twitter 中的标签栏是透明的，但标签栏后面的所有内容都变得模糊。

这是我的自定义选项卡栏的代码：

import SwiftUI

struct CustomTabBar: View {
    @Binding var currentTab: Tab
    
    var body: some View {
        GeometryReader{proxy in
            HStack(spacing: 0){
                ForEach(Tab.allCases,id: \.rawValue){tab in
                    Button{
                        withAnimation(.easeInOut(duration: 0.2)){
                            currentTab = tab
                        }
                    } label: {
                        Image(tab.rawValue)
                            .renderingMode(.template)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 30, height: 30)
                            .frame(maxWidth: .infinity)
                            .foregroundColor(currentTab == tab ? Color.white : Color.white.opacity(0.75))
                    }
                }
            }
            .frame(maxWidth: .infinity)
        }
        .frame(height: 30)
        .padding(.bottom, 10)
        .padding([.horizontal, .top])
        .background{
            Color.white.opacity(0.50)
                .ignoresSafeArea()
        }
    //END OF VAR BODY
    }
//END OF STRUCT
}

struct CustomTabBar_Previews: PreviewProvider {
    static var previews: some View {
        MainTabView()
    }
}

这是我的主选项卡视图的代码，它是一个 ZStack，其中包含我的不同视图和底部的自定义选项卡栏：

import SwiftUI

struct MainTabView: View {
    //HIDING NATIVE TAB BAR
    init(){
        UITabBar.appearance().isHidden = true
    }
    
    @State var currentTab: Tab = .dashboard
    
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom)) {
            TabView(selection: $currentTab){
                ContentView()
                    .tag(Tab.dashboard)
                Text("Analytics")
                    .applyBG()
                    .tag(Tab.analytics)
                Text("Settings")
                    .applyBG()
                    .tag(Tab.settings)
            }

            //CUSTOM TAB BAR
            CustomTabBar(currentTab: $currentTab)
        }
    //END OF VAR BODY
    }
//END OF STRUCT
}

struct MainTabView_Previews: PreviewProvider {
    static var previews: some View {
        MainTabView()
    }
}

//BACKGROUND COLOR OF EACH TAB -- CAN REMOVE ONCE YOU BUILD OUT THE VIEWS
extension View{
    func applyBG()->some View{
        self
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background{
                Color("BG")
                    .ignoresSafeArea()
            }
    }
}

我尝试使用这个溢出问题

的解决方案

但是当我这样做时，它会模糊选项卡栏后面的整个视图，而不仅仅是选项卡栏后面的内容：

这里的颜色不同，但原理相同。

知道如何在标签栏后面实现这种模糊的外观吗？

Answer 1

您目前的标签栏背景似乎是半不透明的白色，但为了实现模糊效果，您需要其中一种材质，例如

.ultraThinMaterial

Answer 2

正如我在答案中已经看到的，由于最新版本的 swift 可以使用

.background(.ultraThinMaterial)

方法，但你应该知道这不是唯一的可能性，可以“使用不同的口音，这里是例子。

ZStack {
    Color.teal
    Label("Flag", systemImage: "flag.fill")
        .padding()
        .background(.regularMaterial, in: 
    RoundedRectangle(cornerRadius: 8))
}

• 
• Apple 文档（链接）