SwiftUI技巧：仅将blendMode应用于指定视图集合

核心思路 #

把需要应用混合模式的子视图单独封装在一个嵌套的ZStack中，并为这个嵌套容器添加.compositingGroup()修饰符。这个修饰符会让容器内的所有视图先完成内部的混合计算，生成一个独立的合成图层，之后再应用不透明度等外部修饰，这样就不会和下方的白色背景产生意外混合。

代码示例 #

错误写法（问题复现） #

struct ProblemView: View {
    var body: some View {
        // 下方的白色背景
        Color.white
            .overlay(
                ZStack {
                    Color.red
                        .frame(width: 200, height: 200)
                    Color.blue
                        .frame(width: 150, height: 150)
                        .blendMode(.multiply)
                        .opacity(0.5) // 降低不透明度后，蓝色会和下方白色背景混合
                }
            )
    }
}

正确写法（解决问题） #

struct FixedView: View {
    var body: some View {
        Color.white
            .overlay(
                // 嵌套ZStack+compositingGroup，确保内部混合先完成
                ZStack {
                    Color.red
                        .frame(width: 200, height: 200)
                    Color.blue
                        .frame(width: 150, height: 150)
                        .blendMode(.multiply)
                }
                .compositingGroup() // 关键：先合成内部视图
                .opacity(0.5) // 不透明度作用在合成后的图层上
            )
    }
}

原理说明 #

• .compositingGroup()会强制SwiftUI将容器内的所有视图渲染为一个单独的图形上下文，内部的blendMode只会在这个上下文内的子视图之间生效。
• 当你在合成后的图层上应用opacity时，是对整个混合后的结果进行透明化，而不是让每个子视图带着透明效果去和外部背景混合，这样就完全隔离了内部混合与外部背景的交互。

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