如何使用带有SwiftUI的ZStack裁剪子视图？

问题描述

我需要使用文本的矩形将视图剪切到文本后面。当我在这个1像素高的矩形上添加文本时，我需要它“剪切”下面的子视图，以便文本可以阅读。

当然，如果我使用纯色背景色，就很容易做到，因为我只需对其进行设置即可裁剪子视图。

这里是要对其进行测试的POC：

struct test: View {
  let gradient = Gradient(colors: [Color.blue,Color.purple])
  
  var body: some View {
    ZStack {
      Rectangle()
        .fill(LinearGradient(gradient: gradient,startPoint: .leading,endPoint: .trailing))
        .frame(width: 200,height: 200)
        
      ZStack {
        Rectangle()
          .fill(Color.white)
          .frame(width: 100,height: 1,alignment: .center)
        Text("XXXX")
          .background(Color.green)
      }
    }
  }
}

有什么想法吗？我认为我不能用口罩处理它。

解决方法

有时候，解决方案可能是不要做，而不是要做。

可以通过上述原则来解决您的问题。

var body: some View {
    ZStack {
        Rectangle()
            .fill(LinearGradient(gradient: gradient,startPoint: .leading,endPoint: .trailing))
            .frame(width: 200,height: 200)

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.white)
                .frame(width: 30,height: 1,alignment: .center)
            Text("XXXX")
            Rectangle()
                .fill(Color.white)
                .frame(width: 30,alignment: .center)
        }
    }