SwiftUI中Mask修饰符的理解与使用

Mask是一种用于控制图形元素可见性的图形技术，使用给定视图的alpha通道掩码该视图。在SwiftUI中，它类似于创建一个只显示视图的特定部分的模板。

Mask修饰符的定义：

func mask<Mask>(
    alignment: Alignment = .center,
    @ViewBuilder _ mask: () -> Mask
) -> some View where Mask : View

alignment：相对于被修饰视图的对齐方式。
mask：呈现系统将其alpha值应用于指定视图的视图。

当想要将另一个视图的alpha(不透明度)值应用到当前视图时，使用mask(_:)修饰符。
mask(_:)修饰符的不透明度决定了它下面视图的可见性。

使用任何形状或视图作为蒙版。

上面的第二个图采用了一个圆形的蒙版，并将其opacity设置为0.8.
mask()修饰符与clipShape()不同，本案例中mask()修饰符即可以修改形状也可以修改不透明度。而clipShape()只调整视图的外部形状。

使用渐变色做蒙版

在mask()修饰符中，我们也可以添加渐变色，下面就是一个动态的Mask。

  @State private var fillPercentage: CGFloat = 0.0

  var body: some View {
    VStack {
      ZStack {
        RoundedRectangle(cornerRadius: 25)
          .fill(LinearGradient(gradient: Gradient(colors: [Color.gray.opacity(0.2), Color.gray.opacity(0.5)]), startPoint: .topLeading, endPoint: .bottomTrailing))

        Text("SwiftUI")
          .font(Font.system(size: 100).bold())
          .frame(width: 350, height: 200)
          .overlay(
            Image("Image_3")
              .resizable()
              .frame(width: 350, height: 200)
              .mask(
                LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: UnitPoint(x: 0, y: 1 - fillPercentage), endPoint: UnitPoint(x: 0, y: 1))
              )
          )
          .animation(.easeInOut(duration: 1.0), value: fillPercentage)
      }
      .frame(width: 350, height: 200)
      .cornerRadius(25)
      .shadow(radius: 10)

      Slider(value: $fillPercentage, in: 0...1)
            .padding()
    }
    .padding()
  }

写在最后

SwiftUI中的Mask功能可以创建复杂的静态或者动态用户界面，这个功能使用好了对于我们的App也是十分增色的，视觉效果也非常好。
本文只是对Mask做了一些简单的理解与使用，有感兴趣的朋友可以继续深入探讨一下。

最后，希望能够帮助到有需要的朋友，如果觉得有帮助，还望点个赞，添加个关注，笔者也会不断地努力，写出更多更好用的文章。