You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现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
}

补充说明

  1. 模糊风格选择:systemUltraThinMaterialLight是最接近Signal效果的选项,它模糊程度淡、底色为白色系,滚动时后方内容会被柔和模糊,无内容时与白色背景几乎一致。如果需要更强的模糊感,可以换成systemMaterialLight。
  2. 背景色设置:浅色模式下调低背景色透明度(或设为.clear),是为了避免额外颜色叠加导致偏灰,让模糊效果完全主导视觉表现。
  3. scrollEdgeAppearance:保持与standardAppearance一致,确保滚动到列表顶部时工具栏效果不变,和Signal的表现统一。

内容的提问来源于stack exchange,提问作者xyz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.29 12:03:18