如何在SwiftUI中使用（不同）大小受限的视图蒙版视图？

Question

我正在尝试使用某些视图遮罩RoundedRectangle（以渐变填充）以接收以下结果：

我正在使用的代码如下：

    VStack(alignment: .leading) {
        RoundedRectangle(cornerRadius: 10)
            .fill(LinearGradient(gradient: self.gradient, startPoint: .leading, endPoint: .trailing))
            .frame(width: geometry.size.width, alignment: .top)
            .mask(
                //WHAT TO PLACE HERE?
             )
        RoundedRectangle(cornerRadius: 10)
            .fill(LinearGradient(gradient: self.gradient, startPoint: .leading, endPoint: .trailing))
            .frame(width: geometry.size.width, height: 8)
    }

但是，当将Rectangle().frame(width: geometry.size.width * 0.4, alignment: .leading)放在.mask内时，它将忽略给定的帧宽度，而仅显示完整的RoundedRectangle：

我已经尝试过.mask内的其他视图，以检查剪辑是否完全有效。

我尝试了Circle().frame(alignment: .leading)，结果是：

请注意，这不符合给定的对齐方式。

然后我尝试了Text("MASKING MASKING").frame(alignment: .trailing)，结果是：

请注意，这确实符合给定的对齐方式。

我对如何实现期望的结果感到很困惑，因为SwiftUI的屏蔽行为似乎非常不直观。

Answer 1

这里是解决方案的演示。经过Xcode 11.4 / iOS 13.4的测试

.mask(
    VStack {
        Rectangle().frame(width: geometry.size.width * 0.4)
    }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
)