SwiftUI控制视图透明度可见区域的mask()

mask() 在 SwiftUI 中用于控制视图的透明度或可见区域。

只会显示 mask 视图的“非透明”部分，其他部分变成透明。

常用来实现裁剪、遮罩或蒙版效果。

基本用法

Image("masterpiece")
    .resizable()
    .scaledToFit()
    .frame(width: 300, height: 300)
    .mask(
        Rectangle()
            .frame(width: 150, height: 150) // 只显示中间部分
    )

只会显示 Rectangle() 定义的区域，其他部分会变成透明。

mask() 的底层逻辑

mask() 使用的视图将决定原视图的哪些部分可见：

白色部分：完全显示原视图。

黑色部分：完全隐藏原视图（透明）。

灰色部分：根据灰度值部分显示原视图（半透明）。

Image("masterpiece0")
    .resizable()
    .scaledToFit()
    .frame(width: 300, height: 300)
    .mask(
        VStack(spacing: 0) {
            Rectangle()
                .frame(width: 300, height: 100).opacity(1)
            
            Rectangle()
                .frame(width: 300, height: 100).opacity(0.5)
            
            Rectangle()
                .frame(width: 300, height: 100)
                .opacity(0)
        }
    )

高级用法示例

1、用 mask() 实现圆形头像

Image("avatar")
    .resizable()
    .scaledToFill()
    .frame(width: 100, height: 100)
    .clipShape(Circle())
    .mask(
        Circle().fill(Color.white)
    )

这里 mask() 创建了一个白色的 Circle() 作为蒙版，只显示圆形区域的头像。

动态蒙版拼图效果

Image("masterpiece")
    .resizable()
    .scaledToFit()
    .mask(
        VStack(spacing: 0) {
            ForEach(0..<8, id: \.self) { row in
                HStack(spacing: 0) {
                    ForEach(0..<10, id: \.self) { col in
                        if masterpieceGrid[row][col] {
                            Rectangle().fill(Color.white) // 显示部分
                        } else {
                            Rectangle().opacity(0) // 隐藏部分
                        }
                    }
                }
            }
        }
    )

mask() 通过 VStack + HStack 生成一个 8×10 的蒙版，用 masterpieceGrid[row][col] 控制哪些部分显示。