在本章中，你将学会使用SwiftUI搭建一个RGB转16进制颜色值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页面样式部分就已经全部完成了。
未完待续
恭喜你，完成了整个项目的页面样式部分！
下一章中，我们将继续完成这个项目的逻辑部分。
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～
