App携手SwiftUI：RGB与16进制颜色转换的便捷桥梁（上）

2023-12-10 13:39:22

一、踏上SwiftUI的色彩转换之旅

作为开发人员，我们经常面临在设计规范中使用RGB颜色值，而在开发代码中却需要16进制颜色值的难题。SwiftUI，一款功能强大的iOS UI工具，为这一难题提供了优雅的解决方案。它让RGB和16进制颜色的转换变得轻而易举，简化了开发过程，提高了我们的效率。

二、构建RGB与16进制颜色转换器App

创建SwiftUI项目

在Xcode中，创建一个新的SwiftUI应用程序，名为“ColorConverter”。

设计UI界面

在主界面中，添加以下元素：

文本字段：输入RGB颜色值
按钮：触发转换
文本视图：显示转换后的16进制颜色值

实现颜色转换功能

在ContentView.swift中，添加以下代码实现转换功能：

import SwiftUI

struct ContentView: View {
    @State private var rgbColor = ""
    @State private var hexColor = ""

    var body: some View {
        VStack {
            TextField("RGB颜色值", text: $rgbColor)
                .keyboardType(.numberPad)
                .padding()

            Button("转换") {
                self.hexColor = self.rgbColor.toHex()
            }
            .padding()

            Text("16进制颜色值：\(hexColor)")
                .padding()
        }
    }
}

extension String {
    func toHex() -> String {
        let rgbValues = self.components(separatedBy: ",")
        guard rgbValues.count == 3,
              let red = Int(rgbValues[0]),
              let green = Int(rgbValues[1]),
              let blue = Int(rgbValues[2]) else {
            return "#000000"
        }

        let hexString = String(format: "#%02X%02X%02X", red, green, blue)
        return hexString
    }
}