如何实现UIToolbarAppearance透明模糊且白色效果?参考Signal应用
实现Signal风格的UIToolbar透明白色模糊效果
你的问题核心在于使用了systemUltraThinMaterialDark这种深色系模糊风格,导致工具栏整体偏灰——Signal确实没有用深色模糊,而是采用浅色系模糊效果来匹配白色背景。以下是调整后的实现方案:
修改要点
- 替换深色模糊风格为浅色版本,确保模糊效果呈现白色调
- 优化背景色透明度设置,让无内容时工具栏与白色背景无缝融合
- 保留深色模式下的适配逻辑
调整后的代码
init() { // Customize UIToolbar let toolbarBackground = UIToolbarAppearance() // 使用浅色超薄模糊风格,匹配Signal的白色模糊效果 toolbarBackground.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterialLight) toolbarBackground.backgroundColor = UIColor(dynamicProvider: { traitCollection in if traitCollection.userInterfaceStyle == .dark { return UIColor.black.withAlphaComponent(0.8) } else { // 浅色模式下用极低透明度的白色,或直接设为.clear,让模糊效果主导视觉 return UIColor.white.withAlphaComponent(0.1) } }) toolbarBackground.shadowColor = .clear UIToolbar.appearance().standardAppearance = toolbarBackground UIToolbar.appearance().scrollEdgeAppearance = toolbarBackground }
补充说明
- 模糊风格选择:
systemUltraThinMaterialLight是最接近Signal效果的选项,它模糊程度淡、底色为白色系,滚动时后方内容会被柔和模糊,无内容时与白色背景几乎一致。如果需要更强的模糊感,可以换成systemMaterialLight。 - 背景色设置:浅色模式下调低背景色透明度(或设为.clear),是为了避免额外颜色叠加导致偏灰,让模糊效果完全主导视觉表现。
- scrollEdgeAppearance:保持与standardAppearance一致,确保滚动到列表顶部时工具栏效果不变,和Signal的表现统一。
内容的提问来源于stack exchange,提问作者xyz
相关产品推荐
相关产品推荐

