RGB颜色和16进制颜色转换太麻烦，使用SwiftUI搭建一个颜色值转换App（上）
项目背景
在日常B端开发过程中，我们看到很多大厂设计规范关于颜色部分标注的都是RGB颜色值，而有时我们开发又会使用到16进制颜色值作为颜色参数。
这时我们就需要把RGB颜色转换为16进制颜色值。
那么本章中，我们就来完成一个RGB转16进制颜色值App。
项目搭建
首先，创建一个新的SwiftUI项目，命名为RGBToHex。
页面样式
我们来完成页面样式部分，设计稿如下：
色卡展示
我们从上至下构建样式部分，首先是最终展示的色卡，由于中间想要展示最终转换后的16进制颜色值，因此需要声明一个变量来存储它。示例：
@State var colorName: String = "请输入RGB值"
然后，我们构建色卡样式部分，示例：
// 色卡展示 func colorCard() -> some View { Text(colorName) .font(.system(size: 23)) .fontWeight(.bold) .frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 240) .padding() .foregroundColor(.white) .background(toRGB(.black) .cornerRadius(8) }
上述代码中，我们构建了一个色卡展示的视图colorCard。
在这个视图里，我们使用Text构建色卡，给文字设置了23的字号，文字加粗，调整了色卡的尺寸为自定义宽度且固定最大高度为240。
设置了padding边距，Text文字颜色foregroundColor为白色，而background背景颜色现在我们先设置为黑色，后面我们再根据用户输入的RGB值自动更新颜色。
最后为了好看，设置了cornerRadius圆角为8。
RGB输入值
下一步，我们需要构建RGB输入值视图，供用户填写对应颜色的RGB值。
首先我们依旧需要提前声明好参数，示例：
@State var redColor: String = "" @State var greenColor: String = "" @State var blueColor: String = ""
上述代码中，我们声明了3个变量：redColor红色、greenColor绿色、blueColor蓝色。
然后我们可以使用TextField构建输入框视图，示例：
// RGB 输入值 func rgbInput() -> some View { HStack { TextField("red", text: $redColor) .textFieldStyle(RoundedBorderTextFieldStyle()) .disableAutocorrection(true) .keyboardType(.numberPad) .onChange(of: redColor) { _ in } TextField("green", text: $greenColor) .textFieldStyle(RoundedBorderTextFieldStyle()) .disableAutocorrection(true) .keyboardType(.numberPad) .onChange(of: greenColor) { _ in } TextField("blue", text: $blueColor) .textFieldStyle(RoundedBorderTextFieldStyle()) .disableAutocorrection(true) .keyboardType(.numberPad) .onChange(of: blueColor) { _ in } } }
上述代码中，我们构建了一个RGB颜色值输入框的视图rgbInput。
我们使用HStack横向排布了3个TextField输入框作为数值输入，然后分别绑定我们声明好的参数。
对于输入框部分，我们禁用了自动更正，并且设置了keyboardType键盘类型为numberPad。
最后使用onChange修饰符绑定声明好的参数，这样的效果是，当我们输入值改变的时候，我们就可以在里面调用相应的方法直接修改颜色。
整体布局
我们回到ContentView视图中，将创建好的视图进行排布，示例：
var body: some View { VStack(spacing: 40) { colorCard() rgbInput() Spacer() } .padding() }
我们让colorCard色卡视图和rgbInputRGB颜色值输入视图纵向排布，并且使用Spacer将视图顶上去。
就此，我们在App页面样式部分就已经全部完成了。
未完待续
恭喜你，完成了整个项目的页面样式部分！
下一章中，我们将继续完成这个项目的逻辑部分。
快来动手试试吧。
