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

njthzxwz  于 2023-04-22  发布在  iOS
关注(0)|答案(1)|浏览(134)

我正试图模糊显示在标签栏后面的内容,使其具有半透明/玻璃形态效果。
这就是我想要实现的(来自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()
            }
    }
}

我尝试使用this overflow question的解决方案
但是当我这样做时,它会模糊标签栏后面的整个视图,而不仅仅是标签栏后面的内容:

这里的颜色不同,但原理相同。
任何想法,我如何才能实现这种模糊的外观背后只是标签栏?

vdzxcuhz

vdzxcuhz1#

看起来你当前的标签栏背景是半透明的白色,但是对于模糊效果,你需要一种材质,比如.ultraThinMaterial

相关问题