🔹 BlendMode：SwiftUI 的混合模式 #

BlendMode 用于控制 两个视图如何混合，类似于 Photoshop 里的图层混合模式。
它决定了前景视图和背景视图的颜色如何相互作用，从而实现透明度、遮罩、滤镜等特效。

🔹 BlendMode 相关修饰符 #

1️⃣ .blendMode(_:) #

直接应用混合模式到单个视图，控制它与背景的混合方式。

示例：使用 .blendMode(.multiply) 让颜色相互叠加

ZStack {
    Image("background")
        .resizable()
        .scaledToFit()

    Text("Hello, SwiftUI!")
        .font(.largeTitle)
        .bold()
        .foregroundColor(.red)
        .blendMode(.multiply) // 让文字颜色与背景图混合
}

📌 效果：

• multiply 模式会让前景色与背景色相乘，更暗的部分保留，白色部分变透明。

2️⃣ .compositingGroup() #

如果 blendMode 作用在多个视图上，默认它们分别与背景混合。
compositingGroup() 让它们先合成一个图层，再与背景混合。

示例：组合多个文本再混合

ZStack {
    Image("background")
        .resizable()
        .scaledToFit()

    VStack {
        Text("SwiftUI")
            .font(.largeTitle)
            .foregroundColor(.red)

        Text("BlendMode")
            .font(.title)
            .foregroundColor(.blue)
    }
    .compositingGroup()
    .blendMode(.difference) // 先合成文本再混合
}

📌 效果：

• difference 模式会计算前景色和背景色的差值，形成对比度较高的特效。
• .compositingGroup() 让 VStack 里的两个文本先合成一个整体，然后与背景混合。

🔹 BlendMode 常见模式 #

🔹 实用建议：

• multiply 适合融合图片和文字
• screen 适合创建高光效果
• overlay 适合增强对比度
• difference 适合创造艺术风格

🔹 什么时候使用 BlendMode？ #

✅ 图片滤镜 & 颜色叠加：让文本或形状与背景图片混合
✅ 特效 & 视觉增强：增强 UI 视觉层次，如光影效果
✅ 遮罩 & 透明效果：结合 .mask() 创建透明或渐变特效

例如，使用 multiply 让文本适应背景颜色：

ZStack {
    Color.yellow
    Text("Hello")
        .font(.largeTitle)
        .bold()
        .blendMode(.multiply)
}

📌 效果：

• 文本会吸收背景色，如果背景是黄色，文字会变暗。

🔹 结论 #

• BlendMode 用于控制前景和背景的颜色混合，常用于 UI 设计和特效。
• .blendMode() 作用于单个视图，.compositingGroup() 让多个视图合并后再混合。
• multiply、screen、overlay 是最常见的混合模式，适用于文字、图片叠加、光影效果等。

如果你想让 UI 更具艺术感，BlendMode 是一个强大的工具！🚀