SwiftUI如何让文本与其他视图重叠区域恒为白色、其余区域为黑色

AI 小北

2026-10-1

你需要的效果无法通过blendMode实现，因为混合模式的渲染结果依赖底层视图的颜色，会随着背景色变化而变化。要实现无论重叠视图是什么颜色，重叠区域文本固定为白色、其余区域固定为黑色的效果，可以采用双层文本+遮罩裁剪的方案：

实现代码

struct ContentView: View {
    // 统一管理重叠区域的位置和大小，避免后续修改出现错位
    private let overlapArea = (width: 200.0, height: 40.0, offsetX: 0.0, offsetY: 20.0)
    
    var body: some View {
        ZStack {
            // 第一层：全局显示的黑色文本
            Text("Over")
                .foregroundColor(.black)
                .font(.system(size: 55, weight: .bold, design: .rounded))
                .offset(x: 10, y: 0)
            
            // 第二层：重叠的自定义视图（可替换为任意视图、任意颜色）
            Color.purple
                .frame(width: overlapArea.width, height: overlapArea.height)
                .offset(x: overlapArea.offsetX, y: overlapArea.offsetY)
            
            // 第三层：仅在重叠区域显示的白色文本，用同位置的遮罩裁剪
            Text("Over")
                .foregroundColor(.white)
                .font(.system(size: 55, weight: .bold, design: .rounded))
                .offset(x: 10, y: 0)
                .mask(
                    Rectangle()
                        .frame(width: overlapArea.width, height: overlapArea.height)
                        .offset(x: overlapArea.offsetX, y: overlapArea.offsetY)
                )
        }
        .frame(width: 200, height: 100, alignment: .center)
    }
}