RGB颜色和16进制颜色转换太麻烦，使用SwiftUI搭建一个颜色值转换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颜色值时，色卡背景颜色就会对应变成我们设置的颜色。
颜色值转换
最后，我们还要完成将输入的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 ?? "颜色解析错误" } } }
上述代码中，当我们输入的颜色值改变时，我们就将Color颜色值调用toRGB方法转换为String类型，并且赋值给colorName颜色值名称。
自此，我们整个项目的逻辑部分就已经全部完成。
项目预览
恭喜你，完成了整个项目的全部内容！
快来动手试试吧。
