携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情。
承接上一章的内容，我们继续完成使用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颜色值时，色卡背景颜色就会对应变成我们设置的颜色。
颜色值转换
最后，我们还要完成将输入的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颜色值名称。
自此，我们整个项目的逻辑部分就已经全部完成。
项目预览
‘
恭喜你，完成了整个项目的全部内容！
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～
