如何在SwiftUI 4.0中复现iOS 16锁屏小组件的Vibrant效果？

我完全理解你想要复现iOS 16锁屏小组件Vibrant效果的需求——这个效果能让小组件内容和锁屏背景无缝融合，质感拉满。你之前尝试的饱和度调整+混合模式的方向是对的，但还需要更精准的步骤组合来匹配系统的渲染逻辑。

核心原理回顾 #

苹果文档里的Vibrant效果本质是三步：

针对锁屏小组件，iOS会将文本、图像和仪表板去饱和度转为单色，并根据锁屏背景为内容适配相应颜色，从而营造出Vibrant效果。用户还可为锁屏添加彩色色调。

更直白地拆解逻辑：

1. 把源内容转成灰度图
2. 用用户选择的色调颜色，将灰度中的白色像素替换为色调亮色，黑色像素替换为色调的透明深色变体
3. 通过混合模式让处理后的内容和背景自然融合

自定义Vibrant效果实现 #

我整理了一个可以直接复用的ViewModifier，完美匹配这个逻辑：

import SwiftUI

struct VibrantEffect: ViewModifier {
    var tintColor: Color
    
    func body(content: Content) -> some View {
        content
            // 把视图打包成一个组，确保后续效果统一应用到整体
            .compositingGroup()
            // 第一步：去饱和转灰度
            .saturation(0)
            // 第二步：用色调颜色映射灰度内容——白色变色调色，深色变色调的深色
            .colorMultiply(tintColor)
            // 叠加一层半透明色调，增强亮色饱和度，让深色更贴合背景
            .overlay(
                tintColor
                    .opacity(0.3)
                    .blendMode(.overlay)
            )
            // 第三步：和背景混合，模拟系统的背景适配逻辑
            .blendMode(.plusLighter)
    }
}

// 给View添加扩展，方便快速调用
extension View {
    func vibrantEffect(tintColor: Color) -> some View {
        self.modifier(VibrantEffect(tintColor: tintColor))
    }
}

结合你的测试代码使用 #

把这个Modifier用到你提供的SourceView上，就能模拟出系统Widget的Vibrant效果了。比如修改你的预览代码：

struct SourceView_Previews: PreviewProvider {
    static var previews: some View {
        // 模拟锁屏背景
        LinearGradient(colors: [Color(white:0.96), Color(white:0.6)], startPoint: .topLeading, endPoint: .bottomTrailing)
            .ignoresSafeArea()
            .overlay(
                SourceView()
                    .vibrantEffect(tintColor: .blue) // 这里可替换为用户选择的任意色调
                    .padding(20)
            )
    }
}

为什么之前的代码效果不好？ #

你之前尝试的saturation(0) + .blendMode(.plusLighter)缺少了关键的色调映射步骤——系统的Vibrant不是简单的灰度加混合，而是把灰度内容和色调颜色做了乘法叠加，再通过额外的覆盖层调整对比度，这样才能让白色像素呈现清晰的色调，深色像素呈现自然的透明色调阴影。

适配用户自定义色调 #

如果要支持用户选择的锁屏彩色色调，只需要动态调整tintColor参数即可。比如用户选红色就传.red，选橙色就传.orange，效果会和系统Widget的Vibrant表现完全一致。

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