在 SwiftUI 中将不透明度应用于 ZStack

Question

这是我的两个重叠矩形的代码，应用了不透明度。

var body: some View {
    let r = Rectangle()
        .foregroundColor(.blue)
        .frame(width: 80, height: 40)
        .position(x: 60, y: 110)

    let r2 = Rectangle()
        .foregroundColor(.green)
        .frame(width: 80, height: 40)
        .position(x: 70, y: 120)

    return ZStack {
        r
        r2
    }.opacity(0.5)
}

它们看起来像这样：

它们需要看起来像这样（红色矩形只是为了更好地查看不透明度）：

所以我的意思是蓝色矩形不应该在绿色矩形下方可见。因为不透明度应该作为一个整体应用于它们，而不是一个一个地应用于它们中的每一个。我怎样才能做到这一点？

Answer 1

在不透明度修饰符之前使用合成组，如

return ZStack { r r2 } .compositingGroup() // << here !! .opacity(0.5)

backup

在 SwiftUI 中将不透明度应用于 ZStack

Applying opacity to ZStack in SwiftUI

opacity

ios

swiftui