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.0var 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()}