SwiftUI实现Glassmorphism风格TabBar毛玻璃效果的问题咨询

iOS 15及以上系统中，UITabBar的外观由standardAppearance（默认状态）和scrollEdgeAppearance（内容滚动到边缘时的状态）两个属性共同控制，默认初始化的UITabBarAppearance模糊度极低，因此达不到毛玻璃融合效果。

正确实现代码 #

.onAppear {
    let appearance = UITabBarAppearance()
    // 配置模糊效果，.systemUltraThinMaterial通透度最高，适配Glassmorphism风格
    appearance.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial)
    // 配置半透明混合色，调整alpha值控制和背景的融合度
    appearance.backgroundColor = UIColor(named: "tabBarBackground")?.withAlphaComponent(0.2) ?? UIColor.systemBackground.withAlphaComponent(0.15)
    // 清除默认阴影线，强化毛玻璃质感
    appearance.shadowColor = .clear
    
    // 同时配置两种状态的外观，避免滚动到边缘时样式突变
    UITabBar.appearance().standardAppearance = appearance
    UITabBar.appearance().scrollEdgeAppearance = appearance
}

已知问题原因说明 #

• 直接设置UITabBar.appearance().backgroundColor无效：iOS 15+ 自定义UITabBarAppearance后，全局的backgroundColor配置会被Appearance内部的属性覆盖，需要将自定义颜色设置到appearance.backgroundColor中才会生效。
• 调用opacity报错：UITabBarAppearance类本身没有opacity成员属性，调整透明度可以通过修改backgroundColor的alpha通道值，或者选择不同厚度的UIBlurEffect样式实现，不会影响TabBar上的图标、文字等前景元素的不透明度。

效果调整建议 #

• 模糊强度调整：可替换UIBlurEffect的style参数，通透度从高到低可选.systemUltraThinMaterial > .systemThinMaterial > .systemMaterial
• 融合色调整：alpha值建议控制在0.1~0.3区间，既能实现和背景的融合效果，也能保证TabBar的辨识度。

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