如何防止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())