在 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)