RGB颜色和16进制颜色转换太麻烦，使用SwiftUI搭建一个颜色值转换App（下）-CFANZ编程社区

承接上一章的内容，我们继续完成使用SwiftUI搭建一个RGB转16进制颜色值App。

逻辑分析

下面我们继续完成App的逻辑部分，当我们输入RGB值的时候，上面的色卡对应背景颜色需要变成我们输入设置的颜色，并且中间的文字也需要展示对应的16进制颜色值。

String转Color

首先我们要弄清楚一件事情，我们的TextField输入框只能绑定String类型，而我们的RGB颜色输入的颜色值需要为Double类型，因此我们需要有一个转化的方法。示例：

// 颜色转换方法
func toRGB(red: String, green: String, blue: String) -> Color {
    let r = Double(red) ?? 51
    let g = Double(green) ?? 51
    let b = Double(blue) ?? 51
    let selectColor = Color(red: r / 255, green: g / 255, blue: b / 255)
    return selectColor
}

上述代码中，我们创建了一个方法toRGB，它接收3个String类型的参数，返回Color颜色类型的参数。

在方法中，我们将接收到的3个String类型的参数，都转换为Double类型，然后声明了一个常量selectColor颜色，将转换好的r、g、b当作参数传入颜色。

最后我们return返回这个颜色selectColor。

完成好后，我们就可以将这个方法加到色卡视图中，示例：

// 色卡展示
func colorCard() -> some View {
    Text(colorName)
        //隐藏了一些修饰符
        .background(toRGB(red: redColor, green: greenColor, blue: blueColor))
}

RGB颜色和16进制颜色转换太麻烦，使用SwiftUI搭建一个颜色值转换App（下）_string类

这样，当我们在输入框中输入RGB颜色值时，色卡背景颜色就会对应变成我们设置的颜色。

颜色值转换

最后，我们还要完成将输入的RGB颜色值转换为Hex16进制颜色值。

我们可以创建一个方法来实现它，示例：

extension Color {
    var uiColor: UIColor { .init(self) }
    typealias RGBA = (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)
    var rgba: RGBA? {
        var (r, g, b, a): RGBA = (0, 0, 0, 0)
        return uiColor.getRed(&r, green: &g, blue: &b, alpha: &a) ? (r, g, b, a) : nil
    }

    var RGBToHex: String? {
        guard let rgba = rgba else { return nil }
        return String(format: "#%02X%02X%02X",
                      Int(rgba.red * 255),
                      Int(rgba.green * 255),
                      Int(rgba.blue * 255))
    }
}

上述代码中，我们对Color颜色进行了extension拓展。

我们使用UIColor方法，将颜色中的r、g、b提取出来转换为String类型，而且rgb颜色值单独转换为16进制，最终返回一个String类型的参数。

我们在输入框视图中，当输入内容改变时调用这个方法，示例：

// RGB 输入值
func rgbInput() -> some View {
    HStack {
        TextField("red", text: $redColor)
            //隐藏了一些代码块
            .onChange(of: redColor) { _ in
                colorName = toRGB(red: redColor, green: greenColor, blue: blueColor).RGBToHex ?? "颜色解析错误"
            }

        TextField("green", text: $greenColor)
            //隐藏了一些代码块
            .onChange(of: greenColor) { _ in
                colorName = toRGB(red: redColor, green: greenColor, blue: blueColor).RGBToHex ?? "颜色解析错误"
            }

        TextField("blue", text: $blueColor)
            //隐藏了一些代码块
            .onChange(of: blueColor) { _ in
                colorName = toRGB(red: redColor, green: greenColor, blue: blueColor).RGBToHex ?? "颜色解析错误"