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 = 0scanner.scanHexInt64(&rgbValue)let r = Double((rgbValue & 0xFF0000) >> 16) / 255.0let g = Double((rgbValue & 0xFF00) >> 8) / 255.0let b = Double(rgbValue & 0xFF) / 255.0self.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.mzph.cn/news/208941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Swing程序设计(9)复选框,下拉框

文章目录 前言一、复选框二、下拉框总结 前言 该篇文章简单介绍了Java中Swing组件里的复选框组件、列表框组件、下拉框组件,这些在系统中都是常用的组件。 一、复选框 复选框(JCheckBox)在Swing组件中的使用也非常广泛,一个方形方…

hadoop安装与配置-shell脚本一键安装配置(集群版)

文章目录 前言一、安装准备1. 搭建集群 二、使用shell脚本一键安装1. 复制脚本2. 增加执行权限3. 分发脚本4. 执行脚本5. 加载用户环境变量 三、启动与停止1. 启动/停止hadoop集群(1) 复制hadoop集群启动脚本(2) 增加执行权限(3) 启动hadoop集群(4) 停止hadoop集群(5) 重启hado…

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

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

编译基于LIO-SAM的liorf“Large velocity, reset IMU-preintegration!“

使用LIO-SAM修改的代码liorf(因自己使用的IMU传感器是 6-axis ouster): LIO-SAM代码连接: https://github.com/TixiaoShan/LIO-SAM liorf代码连接: https://github.com/YJZLuckyBoy/liorf 编译运行出现错误&#…

eve-ng山石网科HillStone镜像部署

HillStone 部署 author:leadlife data:2023/12/4 mains:EVE-ng HillStone 镜像部署 - use hillstone-sg6000 default:hillstone/hillstone 传输 scp hillstone-sg6000.zip root192.168.3.130:/opt/unetlab/addons/qemu/部署 cd …

echarts绘制一个环形图

其他echarts&#xff1a; echarts绘制一个柱状图&#xff0c;柱状折线图 echarts绘制一个饼图 echarts绘制一个环形图2 效果图&#xff1a; 代码&#xff1a; <template><div class"wrapper"><!-- 环形图 --><div ref"doughnutChart…

C++STL的string(超详解)

文章目录 前言C语言的字符串 stringstring类的常用接口string类的常见构造string (const string& str);string (const string& str, size_t pos, size_t len npos); capacitysize和lengthreserveresizeresize可以删除数据 modify尾插插入字符插入字符串 inserterasere…

如何将腾讯混元大模型AI接入自己的项目里(中国版本ChatGPT)

如何将腾讯混元大模型AI接入自己的项目里 一、腾讯混元大模型API二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、 如何获取appKey和uid1、申请appKey:2、获取appKey和uid 四、重要说明 一、腾讯混元大模型API 基于腾讯混元大模型AI的智能文本对话AI机器人…

TypeScript 的修饰符(modifier)和装饰器(decorator)

装饰器是一种特殊类型的声明&#xff0c;它能够被附加到类声明....上。 装饰器使用 expression这种形式

使用消息队列遇到的问题—kafka

目录 1 分区2 消费者3 Kafka 如何保证消息的消费顺序&#xff1f;3.1 方案一3.2 方案二 4 消息积压 在项目中使用kafka作为消息队列&#xff0c;核心工作是创建生产者—包装数据&#xff1b;创建消费者----包装数据。 欠缺一些思考&#xff0c;特此梳理项目中使用kafka遇到的一…

浅析以太网接口及串口转以太网技术

浅析以太网接口 以太网相关接口主要包括&#xff1a;MII/RMII/SMII以及GMII/RGMII/SGMII接口。 一、MII接口 MII&#xff08;Media Independent Interface&#xff09;介质无关接口或称为媒体独立接口&#xff0c;它是IEEE-802.3定义的以太网行业标准。它包括一个数据接口和…

Python 小红书评论区采集 小红薯xhs精准用户获客

成品图 评论接口https://edith.xiaohongshu.com/api/sns/web/v2/comment/page?note_id笔记id&cursor光标 初次使用cursor为空,该接口为GET&#xff0c;需要x-s,x-t签名验证 子评论接口https://edith.xiaohongshu.com/api/sns/web/v2/comment/sub/page?note_id%s&r…

python爬取robomaster论坛文章数据,携带登录信息

一. 内容简介 python爬取robomaster论坛文章数据。 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3代码 三.主要流程 3.1 接口分析&#xff0c;以及网页结构分析 # 这是文章链接,其实id就是文章的id # https://bbs.robomaster.com/forum.php?modview…

win系统一台电脑安装两个不同版本的mysql教程

文章目录 1.mysql下载zip包&#xff08;地址&#xff09;2.解压在你的电脑上&#xff08;不要再C盘和带中文的路径&#xff09;3.创建my.ini文件4.更改环境变量&#xff08;方便使用, 可选&#xff09;5.打包mysql服务6.初始化mysql的data7.启动刚刚打包的服务8.更改密码 1.mys…

【无标将列表中的多组参数依次带入指定的函数将每次调用函数返回结果组成列表itertools.starmap()题】

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 将列表中的多组参数 依次带入指定的函数 将每次调用函数 返回结果组成列表 itertools.starmap() [太阳]选择题 请问以下代码输出的结果是&#xff1f; import itertools a [(1, 2), (3, 4)] p…

基于JAVA+SpringBoot+Vue的前后端分离的医院信息智能化HIS系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着科技的不断发展&a…

【WPF.NET开发】WPF中的对话框

目录 1、消息框 2、通用对话框 3、自定义对话框 实现对话框 4、打开对话框的 UI 元素 4.1 菜单项 4.2 按钮 5、返回结果 5.1 模式对话框 5.2 处理响应 5.3 非模式对话框 Windows Presentation Foundation (WPF) 为你提供了自行设计对话框的方法。 对话框是窗口&…

浙政钉SDK安装

专有订单SDK&#xff08;jar包&#xff09;下载 专有钉钉门户 (dg-work.cn) Maven依赖 浙政钉 <!-- 浙政钉 --> <dependency><groupId>com.oracel</groupId><artifactId>zwdd-sdk-java</artifactId><version>1.2.0</version…

概率密度函数(PDF)正态分布

概率密度函数&#xff08;PDF&#xff09;是一个描述连续随机变量取特定值的相对可能性的函数。对于正态分布的情况&#xff0c;其PDF有一个特定的形式&#xff0c;这个形式中包括了一个常数乘以一个指数函数&#xff0c;它假设误差项服从均值为0的正态分布&#xff1a; p ( …

外汇天眼:新西兰监管机构永久性停止对David McEwen及与其相关的实体的命令

新西兰金融市场管理局&#xff08;FMA&#xff09;已对David Elgar McEwen及与其相关的实体&#xff08;McEwen and Associates&#xff09;发布了永久性停止令。 与McEwen先生相关的实体包括Stockfox Limited、Cosmopolitan Holdings Limited、Strategy Services Limited、Fun…