SwiftUI TabBar滚动到底部半透明效果消失，如何始终保持模糊背景？

问题说明 #

在SwiftUI的TabView中，默认TabBar会在内容滚动至其后方时显示模糊背景，但当内容滚到底部后，TabBar背景会变为透明。要让TabBar在任何滚动状态下都保持半透明/模糊效果，可通过以下两种方式实现：

方法一：自定义系统TabBar外观（推荐） #

利用UIKit的UITabBarAppearance统一设置TabBar在常规滚动和滚动到底部时的外观，让两种状态保持一致：

struct ContentView: View {
    init() {
        let tabBarAppearance = UITabBarAppearance()
        // 设置模糊背景效果
        tabBarAppearance.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial)
        // 可叠加半透明底色增强效果（可选）
        tabBarAppearance.backgroundColor = UIColor.systemBackground.withAlphaComponent(0.7)
        
        // 将外观应用到两种状态
        UITabBar.appearance().standardAppearance = tabBarAppearance
        UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
    }
    
    var body: some View {
        TabView {
            ScrollView {
                // 测试用长列表
                ForEach(0..<50) { index in
                    Text("测试内容 \(index)")
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.gray.opacity(0.1))
                }
            }
            .tabItem {
                Image(systemName: "house")
                Text("首页")
            }
            
            Text("我的页面")
                .tabItem {
                    Image(systemName: "person")
                    Text("我的")
                }
        }
    }
}

关键说明 #

• standardAppearance控制内容未滚到底部时的TabBar外观
• scrollEdgeAppearance控制内容滚到底部时的TabBar外观
• 将两者设为相同配置，即可让TabBar在所有滚动状态下保持一致的模糊/半透明背景

方法二：自定义TabBar（完全控制） #

如果需要高度定制TabBar的样式（比如圆角、特殊布局），可以完全脱离系统TabBar，自己实现一个：

struct CustomTabView: View {
    @State private var selectedTab = 0
    
    // 标签配置
    private let tabs = [
        (icon: "house", title: "首页"),
        (icon: "person", title: "我的")
    ]
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 内容区域
            Group {
                switch selectedTab {
                case 0:
                    ScrollView {
                        ForEach(0..<50) { index in
                            Text("首页内容 \(index)")
                                .padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.gray.opacity(0.1))
                        }
                    }
                case 1:
                    Text("我的页面")
                default:
                    EmptyView()
                }
            }
            
            // 自定义TabBar
            HStack(spacing: 0) {
                ForEach(tabs.indices, id: \.self) { index in
                    Button(action: { selectedTab = index }) {
                        VStack(spacing: 4) {
                            Image(systemName: tabs[index].icon)
                                .font(.title2)
                            Text(tabs[index].title)
                                .font(.caption)
                        }
                        .foregroundColor(selectedTab == index ? .blue : .gray)
                        .padding(.vertical, 8)
                        .frame(maxWidth: .infinity)
                    }
                }
            }
            .padding(.horizontal)
            .background(
                // 模糊背景
                VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial))
                    .cornerRadius(16)
                    .padding(.horizontal, 16)
                    .padding(.bottom, 8)
            )
        }
        .edgesIgnoringSafeArea(.bottom)
    }
}

// SwiftUI封装UIKit模糊视图
struct VisualEffectView: UIViewRepresentable {
    let effect: UIVisualEffect?
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        UIVisualEffectView()
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = effect
    }
}

关键说明 #

• 用ZStack将内容和自定义TabBar叠加，TabBar固定在底部
• 通过VisualEffectView实现模糊背景，完全控制TabBar的样式和显示状态
• 适合需要自定义交互或外观的场景

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