如何在 SwiftUI 中混合两种颜色？答案

【问题标题】：How to mix two colors in SwitUI?如何在 SwiftUI 中混合两种颜色？
【发布时间】：2023-01-31 21:08:53
【问题描述】：

我想在 SwiftUI 代码中混合两种颜色。例如：不透明度为 20% 的绿色和黑色。最终的颜色应该是这两种颜色的混合。除了使用 ZStack 之外还有什么方法可以达到同样的目的吗？

【问题讨论】：

您的最终目标尚不清楚，但是 ZStack 有什么问题？
由于您使用的是 iOS，因此另一种方法是将其转换为 UIColor，然后将它们混合/混合在一起。关于如何使用 UIColor 执行此操作，有多个已回答的问题。快速浏览一下，我看不出有其他选择。
实际上，我想应用两种颜色的混合作为文本的 foregroundColor。
你是说渐变色？？
您需要定义混合颜色的含义，然后弄清楚如何实现这种混合。例如，您可以将颜色转换为 HSB，然后取每个分量的平均值。这可能会产生看起来像两种颜色混合的颜色。

【解决方案1】：

由于您在 iOS 中工作，因此您可以利用可以从 UIColor 创建 SwiftUI Color 的事实。

使用this answer中的UIColor.blend，您可以通过为每个指定颜色和强度(0.0 ... 1.0)来创建2个UIColor的混合。例如，要为 Text 创建前景色，即 80% UIColor.green 和 20% UIColor.black：

struct ContentView: View {
    var body: some View {
        Text("Hello World!")
            .foregroundColor(Color(UIColor.blend(color1: .green, intensity1: 0.8, color2: .black, intensity2: 0.2)))
    }
}

注意：只需在项目的任何文件中包含 UIColor extension 即可。为扩展提供自己的文件是一个好习惯，但如果需要，您可以将其包含在与 View 相同的文件中。

【讨论】：

【解决方案2】：

这是不使用 UIColor 的解决方案。它基于@vacawama 答案中的blend 扩展名。

import SwiftUI

extension Color {
    static func blend(color1: Color, intensity1: CGFloat = 0.5, color2: Color, intensity2: CGFloat = 0.5) -> Color {
        let total = intensity1 + intensity2
        
        let normalisedIntensity1 = intensity1/total
        let normalisedIntensity2 = intensity2/total
        
        guard normalisedIntensity1 > 0 else { return color2 }
        guard normalisedIntensity2 > 0 else { return color1 }
        
        let color1Components = color1.cg.components!
        let color2Components = color2.cg.components!
        
        let (r1, g1, b1, a1): (CGFloat, CGFloat, CGFloat, CGFloat) = (color1Components[0], color1Components[1], color1Components[2], color1Components[3])
        let (r2, g2, b2, a2): (CGFloat, CGFloat, CGFloat, CGFloat) = (color2Components[0], color2Components[1], color2Components[2], color2Components[3])

        return Color(red: normalisedIntensity1*r1 + normalisedIntensity2*r2,
                     green: normalisedIntensity1*g1 + normalisedIntensity2*g2,
                     blue: normalisedIntensity1*b1 + normalisedIntensity2*b2,
                     opacity: normalisedIntensity1*a1 + normalisedIntensity2*a2)
    }
}

【讨论】：