SwiftUI View视频遮罩问题：accentColor失效及底部效果优化求助

问题根源分析 #

1. .accentColor不生效：SwiftUI的mask仅识别遮罩视图的透明度（Alpha通道），RGB颜色值不会影响原视图显示。你设置的.accentColor在这里只被读取alpha值，RGB被忽略，所以看到的白色是视频本身的内容，而非遮罩颜色。
2. 底部遮罩不够实：原渐变的方向和色标设置完全反向了——你设置从底部（.bottom）到中心（.center）从透明过渡到颜色，导致底部几乎没有遮罩效果。

修正后的代码 #

如果你需要的是视频底部叠加半透明绿色渐变遮罩（即视频正常显示，底部被绿色渐变覆盖），请将mask替换为overlay，并调整渐变参数：

// Onboarding Video
OnboardingVideoView(
    videoName: "OnboardingVideo"
)
.overlay(alignment: .bottom) {
    LinearGradient(
        stops: [
            Gradient.Stop(color: .accentColor.opacity(1), location: 0),
            Gradient.Stop(color: .accentColor.opacity(0), location: 0.5)
        ],
        startPoint: .bottom,
        endPoint: .top
    )
}
.ignoresSafeArea(.all)

如果你实际需求是仅保留视频底部区域，其余显示绿色背景（即视频只在绿色区域可见），可以用ZStack结合mask实现：

ZStack {
    // 绿色背景层
    Color.accentColor
    // 仅显示底部一半的视频
    OnboardingVideoView(videoName: "OnboardingVideo")
        .mask(alignment: .bottom) {
            LinearGradient(
                stops: [
                    Gradient.Stop(color: .clear, location: 0.5),
                    Gradient.Stop(color: .black, location: 1)
                ],
                startPoint: .top,
                endPoint: .bottom
            )
        }
}
.ignoresSafeArea(.all)

代码说明 #

• 用overlay替代mask：overlay是在原视图上方叠加新视图，符合“添加遮罩层”的需求；而mask是裁剪原视图，仅保留遮罩不透明的区域。
• 调整渐变参数：色标从底部（location: 0）的完全不透明绿色，渐变到垂直方向50%位置（location: 0.5）的完全透明，确保底部遮罩足够实，向上逐渐消失。

内容的提问来源于stack exchange，提问作者SLE