SwiftUI中根据视图背景色/渐变动态调整文本颜色

要实现根据动态背景（Color或AnyGradient）自动调整Text的foregroundColor，核心是保证文字和背景的对比度足够，这里分两种场景给出实用方案：

1. 处理纯色背景（Color类型） #

对于纯色背景，我们可以基于WCAG标准计算颜色的相对亮度，以此判断应该用黑色还是白色文字：

首先给Color添加扩展，实现亮度计算和明暗判断：

extension Color {
    var relativeLuminance: Double {
        let uiColor = UIColor(self)
        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
        uiColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        
        // 按照WCAG标准处理颜色分量
        func adjustComponent(_ c: CGFloat) -> CGFloat {
            return c <= 0.03928 ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4)
        }
        
        let r = adjustComponent(red)
        let g = adjustComponent(green)
        let b = adjustComponent(blue)
        
        return Double(0.2126 * r + 0.7152 * g + 0.0722 * b)
    }
    
    // 判断颜色是否偏亮
    var isLight: Bool {
        relativeLuminance > 0.5
    }
}

2. 处理渐变背景（AnyGradient类型） #

渐变背景没有单一颜色值，这里提供两种稳妥的处理方式：

方案一：取渐变中间色计算 #

给AnyGradient添加扩展，提取首尾颜色的中间值作为参考色，再用同样的亮度规则判断文字颜色：

extension AnyGradient {
    var contrastTextColor: Color {
        guard let firstColor = colors.first, let lastColor = colors.last else {
            return .black
        }
        
        let firstUIColor = UIColor(firstColor)
        let lastUIColor = UIColor(lastColor)
        
        var r1: CGFloat = 0, g1: CGFloat = 0, b1: CGFloat = 0, a1: CGFloat = 0
        firstUIColor.getRed(&r1, green: &g1, blue: &b1, alpha: &a1)
        
        var r2: CGFloat = 0, g2: CGFloat = 0, b2: CGFloat = 0, a2: CGFloat = 0
        lastUIColor.getRed(&r2, green: &g2, blue: &b2, alpha: &a2)
        
        // 计算首尾颜色的中间值
        let midR = (r1 + r2) / 2
        let midG = (g1 + g2) / 2
        let midB = (b1 + b2) / 2
        
        let midColor = Color(red: Double(midR), green: Double(midG), blue: Double(midB))
        return midColor.isLight ? .black : .white
    }
}

方案二：给文字加阴影（适配复杂渐变） #

如果渐变色彩跨度极大，取中间色可能仍有可读性问题，直接给文字加阴影是更稳妥的方式：

Text(title)
    .foregroundColor(.white)
    .shadow(color: .black.opacity(0.5), radius: 1, x: 0, y: 0)

完整整合代码 #

我们可以用枚举统一管理背景类型，在视图中自动适配文字颜色：

import SwiftUI

// 统一背景类型枚举
enum BackgroundStyle {
    case color(Color)
    case gradient(AnyGradient)
}

// 颜色扩展（之前的亮度计算代码）
extension Color {
    var relativeLuminance: Double {
        let uiColor = UIColor(self)
        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
        uiColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        
        func adjustComponent(_ c: CGFloat) -> CGFloat {
            return c <= 0.03928 ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4)
        }
        
        let r = adjustComponent(red)
        let g = adjustComponent(green)
        let b = adjustComponent(blue)
        
        return Double(0.2126 * r + 0.7152 * g + 0.0722 * b)
    }
    
    var isLight: Bool {
        relativeLuminance > 0.5
    }
}

// 渐变扩展（之前的中间色计算代码）
extension AnyGradient {
    var contrastTextColor: Color {
        guard let firstColor = colors.first, let lastColor = colors.last else {
            return .black
        }
        
        let firstUIColor = UIColor(firstColor)
        let lastUIColor = UIColor(lastColor)
        
        var r1: CGFloat = 0, g1: CGFloat = 0, b1: CGFloat = 0, a1: CGFloat = 0
        firstUIColor.getRed(&r1, green: &g1, blue: &b1, alpha: &a1)
        
        var r2: CGFloat = 0, g2: CGFloat = 0, b2: CGFloat = 0, a2: CGFloat = 0
        lastUIColor.getRed(&r2, green: &g2, blue: &b2, alpha: &a2)
        
        let midR = (r1 + r2) / 2
        let midG = (g1 + g2) / 2
        let midB = (b1 + b2) / 2
        
        let midColor = Color(red: Double(midR), green: Double(midG), blue: Double(midB))
        return midColor.isLight ? .black : .white
    }
}

// 目标视图
struct DynamicBackgroundView: View {
    let title: String
    let background: BackgroundStyle
    let cornerRadius: CGFloat = 16
    
    // 自动计算文字颜色
    private var textColor: Color {
        switch background {
        case .color(let color):
            return color.isLight ? .black : .white
        case .gradient(let gradient):
            return gradient.contrastTextColor
        }
    }
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: cornerRadius)
                .fill(background)
                .shadow(radius: 10)
            Text(title)
                .foregroundColor(textColor)
                .font(.headline)
                // 可选：加一层弱阴影进一步增强可读性
                .shadow(color: textColor.isLight ? .black.opacity(0.3) : .white.opacity(0.3), radius: 0.5)
        }
        .aspectRatio(1, contentMode: .fit)
    }
}

// 预览示例
struct DynamicBackgroundView_Previews: PreviewProvider {
    static var previews: some View {
        VStack(spacing: 20) {
            DynamicBackgroundView(title: "浅色纯色", background: .color(.yellow))
            DynamicBackgroundView(title: "深色纯色", background: .color(.purple))
            DynamicBackgroundView(title: "深色渐变", background: .gradient(AnyGradient(colors: [.blue, .purple])))
            DynamicBackgroundView(title: "亮色渐变", background: .gradient(AnyGradient(colors: [.pink, .yellow])))
        }
        .padding()
    }
}

内容的提问来源于stack exchange，提问作者Andrea Mario Lufino