如何防止SwiftUI clipShape影响子视图

Question

我有一个视图，它使用clipShape修改器将其内容剪裁到特定的形状。我还有一个按钮，作为这个视图的一个深度嵌套的后代。更高级别视图上的clipShape修改器会影响按钮。如何在不影响子视图的情况下裁剪顶层视图？

作为一个最小的例子，下面的视图展示了这种行为。该按钮的背景已被剪裁，因此它不会完全填充形状。删除堆栈上的clipShape修改器可解决此问题。请看附件中的模拟器屏幕截图，了解它的效果。

VStack {
  Button(action: {}) { Text("Button") }
    .padding(20)
    .background(Color.orange)
    .cornerRadius(50)
    .overlay(RoundedRectangle(cornerRadius: 50).stroke())
}
.clipShape(Capsule())

我曾尝试将clipShape修饰符放在不同的视图(如Color.clear)上，而不是堆栈上，但这似乎没有任何区别。

​

​

Answer 1

可与Xcode 12b正常工作

下面是Xcode 11.x的一个解决方法

VStack {
  Button(action: { print(">> works")}) { Text("Button") }
    .padding(20)
    .background(Color.orange)
    .cornerRadius(50)
    .overlay(RoundedRectangle(cornerRadius: 50).stroke())
}
.compositingGroup()       // << here
.clipShape(Capsule())