如何防止 SwiftUI clipShape 影响子视图答案

【问题标题】：How can you prevent SwiftUI clipShape from affecting sub-views如何防止 SwiftUI clipShape 影响子视图
【发布时间】：2020-06-28 09:22:18
【问题描述】：

我有一个视图，它使用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）而不是堆栈上，但这似乎没有任何区别。

【问题讨论】：

这是一个错误。适用于 Xcode 12。

标签： swift swiftui

【解决方案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())

【讨论】：