SwiftUI: 当父视图也被设置圆角时，子视图的圆角半径会发生改变

Question

我遇到了一个关于设置视图正确的圆角半径的问题。假设我有一个像这样的视图：

HStack {
    Text("Hello").padding().background(Color.red).cornerRadius(.infinity)
}

这是效果图： 如您所见，角落完美地圆滑了，这是期望的效果。问题是，当我给父视图（在这种情况下是HStack）添加圆角时，我的子视图的圆角开始超出使角落完美圆滑的边界：

HStack {     
    Text("Hello").padding().background(Color.red).cornerRadius(.infinity)
}.cornerRadius(16)

问题是，我怎样才能确保子视图的圆角边框保持完美，就像第一个图片中一样？

注意：请勿删除HTML标记。

- milo

---

第二张图片结果的代码是什么？ - Simone Pistecchia

@SimonePistecchia 同上，但 HStack 上有圆角，我已编辑问题以显示完整示例。 - milo

我不知道为什么你要将只有一个元素的HStack舍入，但如果在Text之前和之后添加Space()，那么HStack就不会侵蚀红色按钮了。 - Simone Pistecchia

我提供的示例是简化的，以便集中解决问题。但在前后添加Spacer()并不起作用。 - milo

Answer 1

结果发现我需要将视图包装在一个合成组中才能使其工作。

这里有一个可行的示例：

HStack {
    Text("Hello")
    .padding()
    .background(Color.red)
    .cornerRadius(.infinity)
    .compositingGroup()
}.cornerRadius(16)

- milo