RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(上)

简介: RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(上)

RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(上)


项目背景

在日常B端开发过程中,我们看到很多大厂设计规范关于颜色部分标注的都是RGB颜色值,而有时我们开发又会使用到16进制颜色值作为颜色参数。

这时我们就需要把RGB颜色转换16进制颜色值。

那么本章中,我们就来完成一个RGB16进制颜色值App。

项目搭建

首先,创建一个新的SwiftUI项目,命名为RGBToHex

image.png

页面样式

我们来完成页面样式部分,设计稿如下:

image.png

色卡展示

我们从上至下构建样式部分,首先是最终展示的色卡,由于中间想要展示最终转换后的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)
}

image.png

上述代码中,我们构建了一个色卡展示的视图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
            }
    }
}

image.png

上述代码中,我们构建了一个RGB颜色值输入框的视图rgbInput

我们使用HStack横向排布了3个TextField输入框作为数值输入,然后分别绑定我们声明好的参数。

对于输入框部分,我们禁用了自动更正,并且设置了keyboardType键盘类型为numberPad

最后使用onChange修饰符绑定声明好的参数,这样的效果是,当我们输入值改变的时候,我们就可以在里面调用相应的方法直接修改颜色。

整体布局

我们回到ContentView视图中,将创建好的视图进行排布,示例:

var body: some View {
    VStack(spacing: 40) {
        colorCard()
        rgbInput()
        Spacer()
    }
    .padding()
}

我们让colorCard色卡视图和rgbInputRGB颜色值输入视图纵向排布,并且使用Spacer将视图顶上去。

就此,我们在App页面样式部分就已经全部完成了。

image.png

未完待续

恭喜你,完成了整个项目的页面样式部分!

下一章中,我们将继续完成这个项目的逻辑部分。

快来动手试试吧。

相关文章
|
9月前
|
算法 安全 程序员
关于死锁你了解多少,通过“让APP随手机壳改变颜色,程序员和产品经理大家”这一事,了解下死锁可好?
关于死锁你了解多少,通过“让APP随手机壳改变颜色,程序员和产品经理大家”这一事,了解下死锁可好?
91 1
|
iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(3)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
186 0
|
前端开发 数据处理 iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
106 0
|
iOS开发 Kotlin 容器
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
149 0
|
存储 缓存 前端开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)
150 0
|
前端开发 Swift iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)
246 0
|
存储 PHP Swift
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)
187 0
|
前端开发 iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)
187 0
|
iOS开发 开发者 容器
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)
160 0
|
iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)
156 0

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 4
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    31
  • 5
    陪玩APP推送配置:陪玩系统手机锁屏收不到推送?可能是这些原因!解决方案来了!
    34
  • 6
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    33
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    135
  • 8
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    60
  • 9
    语音app系统软件源码开发搭建新手启蒙篇
    44
  • 10
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    884