swiftUi——颜色

在SwiftUI中,您可以使用Color结构来表示颜色。Color可以直接使用预定义的颜色,例如.red.blue.green等,也可以使用自定义的RGB值、十六进制颜色代码或者系统提供的颜色。

1. 预定义颜色

Text("预定义颜色").foregroundColor(.red)
Text("预定义颜色").foregroundColor(Color.red)

预定义颜色查看 Color | Apple Developer Documentation

2. 使用RGB值创建颜色

Color(red: 0.1, green: 0.2, blue: 0.3, opacity:1) // RGB颜色值在0到1之间,opacity透明度0-1

3. 使用十六进制颜色代码

使用十六进制颜色代码需要一个小的扩展,因为SwiftUI原生并不支持十六进制初始化颜色

extension Color {
    init(hex: String) {
        let scanner = Scanner(string: hex)
        _ = scanner.scanString("#") // 跳过'#'字符
        
        var rgbValue: UInt64 = 0
        scanner.scanHexInt64(&rgbValue)
        
        let r = Double((rgbValue & 0xFF0000) >> 16) / 255.0
        let g = Double((rgbValue & 0xFF00) >> 8) / 255.0
        let b = Double(rgbValue & 0xFF) / 255.0
        
        self.init(red: r, green: g, blue: b)
    }
}

// 使用扩展
let customColor = Color(hex: "#123456")
 Text("使用十六进制颜色代码").foregroundColor(Color.green) // 设置文本颜色
                    .background(Color(hex: "#123456")) // 设置背景颜色,使用了扩展

上述代码的foregroundColorbackground方法接受Color实例,并分别设置文本的前景色和背景色。

4. 使用与UIColor相同的系统颜色

let systemBackground = Color(UIColor.systemBackground) // 系统背景色

5. 渐变色

使用了LinearGradient作为文本的背景,然后使用.mask修饰符将同样大小和内容的Text覆盖在它上面。渐变背景只会显示在掩码文本的形状内部,这样看起来文本就像是有渐变色效果一样。

使用.mask是因为我们要确保渐变填充文本内部的形状,而不仅仅在其背景区域。.foregroundColor(nil)则是为了确保文本本身不显示默认的前景颜色,从而允许掩码显示渐变色。
 

Text(" 渐变色").font(.system(size:80)).fontWeight(.bold).foregroundColor(.clear)
                .background(
                    LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]),
                                   startPoint: .leading,
                                   endPoint: .trailing)
                )
                .mask(
                    Text("渐变色")
                        .font(.system(size:80)).fontWeight(.bold)
                )

我们创建了一个LinearGradient,它有红色到蓝色的渐变。该渐变被设定为文本的前景色,从而产生了一个从左到右的渐变效果。

如果想要的渐变方向不同,你只需调整startPointendPoint的参数。

你也能使用.background来相似地设置文本的背景渐变色。但是,需要记住的是,.foreground修饰符是直接应用到文本上的,相对于.background来说可能是更多想要的效果,因为.background修饰符会在文本下面应用渐变色,而不会直接改变文本颜色。


 

6. 阴影

使用.shadow()修饰符来给任何视图(包括文本)添加阴影效果。这个修饰符允许你指定阴影的颜色、半径、以及 x 和 y 轴的偏移量。

Text("这是带阴影的文字")
    .font(.largeTitle)
    .shadow(color: .gray, radius: 2, x: 0, y: 2)

在这个例子中,文本将显示为大标题字体,并且有一个灰色的阴影。阴影的半径是2,偏移量在 x 轴方向是 0,在 y 轴方向是 2。 

 效果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/230377.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用STM32 HAL库进行GPIO控制的实例

✅作者简介:热爱科研的嵌入式开发者,修心和技术同步精进, 代码获取、问题探讨及文章转载可私信。 ☁ 愿你的生命中有够多的云翳,来造就一个美丽的黄昏。 🍎获取更多嵌入式资料可点击链接进群领取,谢谢支持!…

人工智能学习9(LightGBM)

编译工具:PyCharm 文章目录 编译工具:PyCharm lightGBM原理lightGBM的基础使用案例1:鸢尾花案例2:绝对求生玩家排名预测一、数据处理部分1.数据获取及分析2.缺失数据处理3.数据规范化4.规范化输出部分数据5.异常数据处理5.1删除开…

调用win32 api获取电脑名字和系统目录

学习一下几个函数的功能,和调用方式; void CBasenameView::OnDraw(CDC* pDC) {CBasenameDoc* pDoc GetDocument();ASSERT_VALID(pDoc);// TODO: add draw code for native data hereCString str1;TCHAR myname1[50], myname2[50], mydirname1[50], myd…

class061 最小生成树【算法】

class061 最小生成树【算法】 2023-12-8 11:48:12 算法讲解061【必备】最小生成树 code1 P3366 【模板】最小生成树 // Kruskal算法模版(洛谷) // 静态空间实现 // 测试链接 : https://www.luogu.com.cn/problem/P3366 // 请同学们务必参考如下代码中…

实战:Docker Compose 下 Nginx、Java、Mysql 和 Redis 服务协同部署(包含解决浏览器访问Linux部署服务器本地资源问题)

1. 背景 在该实战中,我们将探讨如何使用Docker Compose协同部署Nginx、Java、Mysql和Redis服务,实现一个视频上传与展示的应用。具体需求如下: Java应用负责上传视频和图片资源到Nginx目录下,作为资源服务器。Nginx服务作为静态…

Redis数据已经删除了,为什么内存占用还是很高?

Redis数据已经删除了,为什么内存占用还是很高? Redis做了数据删除操作,为什么使用top命令时,还是显示Redis占了很多内存? 没做相关功课的人觉得这个问题有问题,删了数据还说占着内存,面试官不…

ubuntu22.04 安装cuda

CUDA(Compute Unified Device Architecture)是由 NVIDIA 开发的一种并行计算平台和编程模型。它允许开发者利用 NVIDIA 的 GPU(图形处理单元)进行高效的计算处理。CUDA 通过提供一系列的 C、C 和 Fortran 扩展,使得开发…

Navicat 技术指引 | 连接 GaussDB 分布式

Navicat Premium(16.3.3 Windows 版或以上)正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能,还提供强大的高阶功能(如模型、结…

小程序开发要多少钱

随着智能手机的普及和人们对移动应用的需求不断增长,小程序作为一种轻量级应用形式,在商业领域中备受关注。众多企业都渴望抓住这一机遇,但他们最关心的问题之一是:小程序开发需要多少钱? 一、开发方式选择 在开始小…

【LuatOS】笔记(二)基础框架

开发环境搭建 合宙官方搭建的是:vscodeLuatOS-SOC推荐拓展包(vscode插件),原文链接:LuatOS开发环境搭建。安装完创建项目文件,创建main.lua文件,就可以开始编写了。 函数与使用 LuatOS-SOC接口文档1,该文档…

MongoDB的插入文档、更新文档语句

本文主要介绍MongoDB的插入文档、更新文档语句。 目录 MongoDB插入文档MongoDB更新文档 MongoDB插入文档 在MongoDB中,可以通过使用insertOne或insertMany方法向集合中插入文档。 insertOne方法可以插入一个文档,例如: db.collection.inse…

【深度学习】一维数组的聚类

在学习聚类算法的过程中,学习到的聚类算法大部分都是针对n维的,针对一维数据的聚类方式较少,今天就来学习下如何给一维的数据进行聚类。 方案一:采用K-Means对一维数据聚类 Python代码如下: from sklearn.cluster im…

【Cisco Packet Tracer】路由器实验 静态路由/RIP/OSPF/BGP

本教程讲解路由器的静态IP配置、RIP、OSPF、BGP等实验内容。 一、基本设置 绘制以下拓扑结构: PC0设置: PC1设置: Router0端口0设置: Router0端口1设置: Router1端口0设置: Router1端口1设置&#xff1a…

Elasticsearch:使用 Elasticsearch 向量搜索及 RAG 来实现 Chatbot

Elasticsearch 的向量搜索为我们的语义搜索提供了可能。而在人工智能的动态格局中,检索增强生成(Retrieval Augmented Generation - RAG)已经成为游戏规则的改变者,彻底改变了我们生成文本和与文本交互的方式。 RAG 使用大型语言模…

PR剪辑视频做自媒体添加字幕快速方式(简单好用的pr视频字幕模板)

如何选择合适的字幕添加进短视频呢?首先要先确定增加的视频风格,简约、商务、科技感、炫酷;再确定用途,注释、标记、语音翻译、引用、介绍;最后在相应的模板中挑选几个尝试,悬着一个最切合主题的使用&#…

数据结构——队列

目录 一、队列的定义 二、队列的实现 1. 队列的顺序存储结构 1.1. 顺序队 1. 创建顺序队 2. 删除顺序队 3. 判断队列是否为空 4. 判断队列是否已满 5. 入队 6. 出队 7. 获取队列长度 8. 获取队首元素 1.2. 环形队 1. 创建环形队 2. 删除环形队 3. 判断环形队列…

QMenu风格设计qss+阴影

Qt的菜单经常在软件开发中用到&#xff0c;默认的菜单效果都不符合设计师的要求&#xff0c;本篇介绍QMenu菜单的风格设计&#xff0c;包括样式表和阴影。 1.QMenu样式表的设计 首先看一个默认的菜单 void QGraphicsDropShadowEffectDemo::slotShowDialog() {qDebug() <&l…

Navicat 技术指引 | 适用于 GaussDB 分布式的查询功能

Navicat Premium&#xff08;16.3.3 Windows 版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结…

关于前端原生技术-Jsonp的理解与简述

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/134777717 出自【进步*于辰的博客】 在学习了Jsoup这个知识点之后&#xff0c;发觉js的这一特点…

智慧社区前景无限,科技引领未来发展

社区是城镇化发展的标志&#xff0c;作为人类现代社会的生活的基本圈子&#xff0c;是人类生活离不开的地方&#xff0c;社区人口密度大、车辆多&#xff0c;管理无序&#xff0c;社区的膨胀式发展多多少少带来一定的管理上的缺失。社区作为智慧城市建设的重要一环&#xff0c;…
最新文章