SwiftUI实现渐进式模糊TabBar遇到问题求助

我尝试在SwiftUI中复刻一款渐进式模糊TabBar，使用Glur库实现模糊效果，但当前效果和预期存在差距。

效果对比 #

目标效果1：

目标效果2：

当前尝试效果：

优化后的实现代码 #

import SwiftUI
import Glur

struct CustomTabBar: View {
    @Binding var selectedTab: Int
    
    let tabs = [
        ("photo", "Photos"),
        ("clock", "Recents"),
        ("globe", "Explore"),
        ("person.2", "Sharing"),
        ("person.crop.square", "Profile")
    ]
    
    var body: some View {
        HStack(spacing: 0) {
            ForEach(0..<tabs.count, id: \.self) { index in
                Spacer()
                VStack(spacing: 4) {
                    Image(systemName: tabs[index].0)
                        .font(.system(size: 24))
                    Text(tabs[index].1)
                        .font(.caption)
                }
                .foregroundColor(selectedTab == index ? .black : .gray)
                .onTapGesture {
                    selectedTab = index
                }
                Spacer()
            }
        }
        .padding(.vertical, 10)
        .background(
            ZStack {
                // 基础渐进模糊层
                Rectangle()
                    .fill(.ultraThinMaterial)
                    .glur(radius: 30, offset: 0.8, interpolation: 0.3, direction: .up)
                
                // 渐变遮罩强化渐进效果
                LinearGradient(
                    gradient: Gradient(stops: [
                        .init(color: .clear, location: 0),
                        .init(color: Color.white.opacity(0.1), location: 1)
                    ]),
                    startPoint: .top,
                    endPoint: .bottom
                )
            }
            .ignoresSafeArea(edges: .bottom)
        )
        .overlay(
            // 顶部分隔线增强边界感
            Rectangle()
                .fill(Color.black.opacity(0.05))
                .frame(height: 1)
                .padding(.bottom, -10)
        )
    }
}

struct ContentView: View {
    @State private var selectedTab = 0
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 模拟滚动主内容，便于观察模糊效果
            ScrollView {
                LazyVStack(spacing: 20) {
                    ForEach(0..<20) { index in
                        RoundedRectangle(cornerRadius: 12)
                            .fill(Color(red: Double.random(in: 0.6...1), green: Double.random(in: 0.6...1), blue: Double.random(in: 0.6...1)))
                            .frame(height: 100)
                            .padding(.horizontal)
                    }
                }
                .padding(.top)
            }
            
            CustomTabBar(selectedTab: $selectedTab)
        }
    }
}

#Preview {
    ContentView()
}

核心优化点 #

• Glur参数调整：通过增大模糊半径、调整偏移量和插值参数，强化向上的渐进模糊效果，让TabBar上方模糊更浅、下方更浓郁。
• 渐变遮罩叠加：在模糊层上方添加半透明渐变，进一步优化视觉过渡，让渐进模糊更自然。
• 布局细节完善：整合图标与文字为垂直布局，添加顶部细分隔线，贴近目标效果的样式设计。
• 主内容模拟：替换纯色背景为滚动卡片列表，直观展示模糊效果对下层内容的作用。

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