SwiftUI自定义Tab Bar实现底部内容模糊玻璃态效果

问题说明 #

需要给底部自定义TabBar实现仅TabBar区域背后内容模糊的半透明玻璃态效果，类似Twitter的TabBar，解决之前方案导致整个视图模糊的问题。

修改后的代码 #

1. 自定义TabBar（含模糊视图封装）

import SwiftUI

// 兼容iOS13+的模糊视图封装
struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style = .systemMaterialLight
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {}
}

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 {
            // 玻璃态模糊背景
            BlurView(style: .systemMaterialLight)
                .ignoresSafeArea()
            // 可选：叠加半透明底色增强玻璃态质感
            Color.white.opacity(0.2)
                .ignoresSafeArea()
        }
    }
}

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

2. 主TabView调整

import SwiftUI

struct MainTabView: View {
    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)
                    .edgesIgnoringSafeArea(.bottom)
                Text("Analytics")
                    .applyBG()
                    .tag(Tab.analytics)
                    .edgesIgnoringSafeArea(.bottom)
                Text("Settings")
                    .applyBG()
                    .tag(Tab.settings)
                    .edgesIgnoringSafeArea(.bottom)
            }
            // 也可直接给TabView添加该修饰符，无需逐个子视图设置
            // .edgesIgnoringSafeArea(.bottom)

            CustomTabBar(currentTab: $currentTab)
        }
    }
}

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

extension View{
    func applyBG()->some View{
        self
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background{
                Color("BG")
                    .ignoresSafeArea()
            }
    }
}

关键修改点 #

1. 精准模糊实现：用UIVisualEffectView封装的BlurView替代纯色背景，它只会模糊自身覆盖区域的下方内容，避免整个视图被模糊。
2. 内容延伸设置：给TabView的子视图添加.edgesIgnoringSafeArea(.bottom)，让内容延伸到底部安全区，确保TabBar下方有可被模糊的内容。
3. iOS15+简化方案：如果只兼容iOS15及以上，可直接用SwiftUI原生Material替换BlurView，示例：

   .background {
       Material.ultraThinMaterialLight
           .ignoresSafeArea()
       Color.white.opacity(0.2)
           .ignoresSafeArea()
   }
   

   可根据需求选择ultraThinMaterial/thinMaterial等不同厚度的Material样式。

内容的提问来源于stack exchange，提问作者Jake Heyen