如何防止 SwiftUI clipShape 影响子视图

Posted 2023-02-23

【中文标题】如何防止 SwiftUI clipShape 影响子视图

【英文标题】：How can you prevent SwiftUI clipShape from affecting sub-views

【发布时间】：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。

【参考方案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())