SwiftUI中的.compositingGroup()有什么作用？

Question

我无法理解compositingGroup()是什么。起初，我以为它像Photoshop中的“合并图层”。但实际上不是这样的。因为即使我使用.compositingGroup()，.shadow()效果也会分别作用于覆盖和背景视图。

到目前为止，当我使用.compositingGroup()时，我发现了两个不同之处：

• 文本没有阴影。
• 覆盖视图的阴影大小略小于上方的阴影。

那么，compositingGroup的目的是什么？

struct ContentView: View {
    var body: some View {
        VStack(spacing: 50) {
            Text("Without\ncompositing")
                .font(.largeTitle)
                .bold()
                .padding()
                .foregroundColor(Color.white)
                .background(RoundedRectangle(cornerRadius: 30).fill(Color.red))
                .padding()
                .padding()
                .overlay(RoundedRectangle(cornerRadius: 30).stroke(lineWidth: 10))
                .shadow(color: .blue, radius: 5)

            Text("With\ncompositing")
                .font(.largeTitle)
                .bold()
                .padding()
                .foregroundColor(Color.white)
                .background(RoundedRectangle(cornerRadius: 30).fill(Color.red))
                .padding()
                .padding()
                .overlay(RoundedRectangle(cornerRadius: 30).stroke(lineWidth: 10))
                .compositingGroup() // <--- I added .compositingGroup() here.
                .shadow(color: .blue, radius: 5)
        }
    }
}

- user2848557

Answer 1

此修饰符使得以下的修饰符被应用于整个视图，而不是分别应用于每个子视图。

以下是一个例子，以更好地说明这一点：

struct ContentView: View {
    let circles: some View = ZStack {
        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(.red)
            .offset(y: -25)

        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(.blue)
            .offset(x: -25, y: 25)

        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(.green)
            .offset(x: 25, y: 25)
    }

    var body: some View {
        VStack(spacing: 100) {
            circles

            circles
                .opacity(0.5)

            circles
                .compositingGroup()
                .opacity(0.5)
        }
    }
}

所以在您的情况下，阴影是应用于整个视图而不是分别应用于Text和覆盖RoundedRectangle

- ramzesenok

---

非常好的例子！ - StackUnderflow

非常好的例子！ - undefined

Answer 2

当想要对一组视图应用效果（如不透明度或阴影），而不是单独应用于每个元素时，请使用它。

- Anton Klymenko

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 3

似乎.shadow()修饰符会同时添加内部和外部阴影。这意味着，如果视图不是“实心”的，例如，它有一个“孔”，.shadow()将会添加如下的阴影：

RoundedRectangle(cornerRadius: 30)
    .stroke(lineWidth: 10)
    .frame(width: 300)
    .shadow(color: .blue, radius: 5)

点击查看图片

所以，如果你不想要内部阴影，你需要使你的视图变为“实心”的，如下所示：

 RoundedRectangle(cornerRadius: 30)
    .stroke(lineWidth: 10)
    .frame(width: 300)
    .background(RoundedRectangle(cornerRadius: 30).fill(.white))
    .shadow(color: .blue, radius: 5)

点击查看图片

然而，又出了问题，内部阴影没有消失。 这是因为我忘记应用 .compositingGroup() 修改器。

正如 @ramzesenok 所提到的那样，.compositingGroup() 使得以下修改器作用于整个视图，而不是每个子视图分别应用。

所以，稍微改变一下代码：

RoundedRectangle(cornerRadius: 30)
                .stroke(lineWidth: 10)
                .frame(width: 300)
                .background(RoundedRectangle(cornerRadius: 30).fill(.white))
                .compositingGroup()
                .shadow(color: .blue, radius: 5)

点击查看图片

现在只有外部阴影。

- Chiaki