如何使用 ZStack 和 SwiftUI 剪辑子视图？答案

【问题标题】：How to clip subviews using ZStack with SwiftUI?如何使用 ZStack 和 SwiftUI 剪辑子视图？
【发布时间】：2020-12-06 21:10:44
【问题描述】：

我需要使用它的矩形来剪辑文本后面的视图。当我在这个 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)
      }
    }
  }
}

有什么想法吗？我不认为我可以使用面具来处理它。

【问题讨论】：

标签： ios swiftui subview clipping zstack

【解决方案1】：

有时一个解决方案可能是不做而不是要做但。

这是解决您的问题的上述原则的可能实现。

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, height: 1, alignment: .center)
        }
    }

【讨论】：