SwiftUI(三)- 渐变、实心形状和视图背景

引言

在现代的应用的UI设计中,渐变和形状背景为界面带来了丰富的层次与视觉效果,而SwiftUI提供了一系列简单且强大的API,可以轻松实现这些效果。在这篇文章中,我们将介绍SwiftUI中的渐变、实心形状和视图背景的基础用法,帮助你在项目中创建更具有吸引力的界面设计。无论是为按钮添加渐变,还是使用自定义形状构构建独特的背景,这些技巧的应用都能提升应用的视觉体验。接下来我们就开始一起探索这些SwiftUI的基本组件吧。

渲染渐变

在UIKit中并没有提供渐变的组件,我们通过使用渐变图层CAGradientLayer来构建渐变效果,这需要很多代码,而SwiftUI中就相对容易很多,它为我们提供了多种渐变选项。例如我们可以使用红色到绿色的线性渐变来渲染文本视图,如下所示:

        Text("Hello world!").padding().foregroundStyle(.white).background(LinearGradient(gradient: Gradient(colors: [.red, .green]), startPoint: .leading, endPoint: .trailing))

颜色是一个数组,我们可以设置任意数量的颜色,默认情况下,SwiftUI会将它们均匀分配。比如我们设置从红色到绿色再到蓝色:

        Text("Hello world!").padding().foregroundStyle(.white).background(LinearGradient(gradient: Gradient(colors: [.red, .green,.blue]), startPoint: .leading, endPoint: .trailing))

还可以进行垂直渐变,将.leading,.trailing改为.top和.bottom,以及.topLeading,.topTrailing等值进行倾斜的渐变:

        Text("Hello world!").padding().foregroundStyle(.white).background(LinearGradient(gradient: Gradient(colors: [.red, .green,.blue]), startPoint: .top, endPoint: .bottom))

创建几何形状

在UIKit中通常我们只能创建长方形和正方形,而且其它的形状我们需要借助CALayer和变换来实现,SwiftUI想要使用简单的几何形状,我们同样也可以直接创建它们。

例如我们创建一个100*100的红色正方形,代码如下:

        Rectangle().fill(Color.red).frame(width: 100, height: 100)

但是创建圆形,相对于UIKit,SwiftUI直接为我们提供了圆形形状:

        Circle().fill(Color.blue).frame(width: 100, height: 100)

为视图创建背景

在UIKit中并没有直接为视图创建背景的方法,通常我们只可以为视图设置背景颜色,但是可以通过视图的层级结构来为视图添加背景视图。而在SwiftUI中设置背景图像和设置背景的方法都是使用background()修饰符,它除了颜色之外还可以指定背景图像,例如,创建一个大字体的文本视图,然后在后面放置一个300*300的logo图片:

        Text("hello, world!").font(.largeTitle).background(Image("swift").resizable().frame(width: 300, height: 300))

事实上这一点UIKit通过设置CALayer的寄宿图也可以实现视图的图像背景,但在SwiftUI中视图的背景并不一定是图像,而是可以使用任何类型的视图做背景。比如我们在文字后面放置一个300*300的红色圆形:

        Text("hello, world!").font(.largeTitle).background(Circle().fill(Color.red).frame(width: 200, height: 200))

再夸张一些我们甚至可以使用文本来作为文本的背景:

        Text("hello, world!").font(.largeTitle).background(Text("hello, world!").font(.title).foregroundStyle(.red))

当然我们通常不会这样设置。

结语

通过这篇文章,我们了解了如何在 SwiftUI 中应用渐变、实心形状和背景视图,为界面设计增添更多可能性。这些基础组件不仅为 UI 带来了视觉层次感,也为开发者提供了更灵活的设计选择。掌握这些用法后,你可以根据项目需求灵活地运用它们,为应用界面注入独特的风格和个性化效果。希望这些基础技巧能为你的 SwiftUI 开发带来启发,创造出更具吸引力和表现力的用户界面。

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

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

相关文章

【论文阅读】Learning persistent homology of3D point clouds

摘要 motivation:PD计算过程非常耗时,严重限制了TDA的应用 本文提出了一种端到端的神经网络模型TopologyNet,用于直接从3D点云数据中拟合拓扑表示。TopologyNet显著减少了生成拓扑表示的计算时间,并在实际实例中保持了较小的近似…

Python4

4. 更多控制流工具 除了刚介绍的 while 语句&#xff0c;Python 还用了一些别的。我们将在本章中遇到它们。 4.1. if 语句 if elif else if x<0: x 0 print(Negative changed to zero) elif x0: print( zero) else: print(More) 4.2. for 语句 Pyth…

2024.7最新子比主题zibll7.9.2开心版源码+授权教程

授权教程&#xff1a; 1.进入宝塔搭建一个站点 绑定 api.zibll.com 域名 并上传 index.php 文件 2.设置伪静态 3.开启SSL证书&#xff0c;找一个能用的域名证书&#xff0c;将密钥(KEY)和证书(PEM格式)复制进去即可 4.在宝塔文件地址栏中输入 /etc 找到 hosts文件并打开&a…

【Docker】docker | 部署nginx

一、概述 记录下nginx的部署流程&#xff1b;将conf配置文件映射到宿主机 前提依赖&#xff1a;自行准备nginx的镜像包 二、步骤 1、运行、无映射 docker run --name nginx -p 80:80 -d nginx:1.18.0-alpine 80&#xff1a;80&#xff0c;前面是宿主机端口&#xff1b;如果冲…

uniapp:上拉加载更多、下拉刷新、页面滚动到指定位置

提醒 本文实例是使用uniapp进行开发演示的。 一、需求场景 在开发商品&#xff08;SKU&#xff09;列表页面时&#xff0c;通常有三个需求&#xff1a; 页面下拉刷新&#xff0c;第一页展示最新数据&#xff1b;上拉加载更多数据&#xff1b;列表页面可以滚动到指定位置&#x…

Liunx权限概念及权限管理

目录 一&#xff1a;shell命令以及运行原理 二&#xff1a;Linux权限的概念 三&#xff1a;Linux的权限管理 3.1文件访问者的分类 3.2文件类型和访问权限&#xff08;事物属性&#xff09; 3.3文件权限的表达方式&#xff1a; 3.4文件访问权限的相关设置方法 四&…

前沿技术与未来发展第一节:C++与机器学习

第六章&#xff1a;前沿技术与未来发展 第一节&#xff1a;C与机器学习 1. C在机器学习中的应用场景 C在机器学习中的应用优势主要体现在高效的内存管理、强大的计算能力和接近底层硬件的灵活性等方面。以下是 C 在机器学习领域的几个主要应用场景&#xff1a; 1.1 深度学习…

Vue3 学习笔记(七)Vue3 语法-计算属性 computed详解

#1024程序员节|征文# 1、计算属性 computed 在 Vue.js 中&#xff0c;计算属性&#xff08;computed properties&#xff09;是一种特殊的响应式属性&#xff0c;它们根据依赖的响应式数据自动更新。计算属性非常适合用于当你需要根据现有数据派生出一些状态时。 (1)、基本用法…

IntelliJ IDEA 查看类class的结构Structure轮廓outline窗口, 快捷键是Alt+7

IntelliJ IDEA 查看类class的结构Structure轮廓outline窗口, 快捷键是Alt7 idea的结构Structure窗口相当于Eclipse的outline 快捷键是: Alt7 或者点击左上角主菜单面包屑,打开主菜单 然后菜单找到-视图&#xff08;View&#xff09;→ 工具窗口&#xff08;Tool Windows&…

基于大数据 Python+Vue 酒店爬取可视化系统(源码+LW+部署讲解+数据库+ppt)

&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 会持续一直更新下去 有问必答 一键收藏关注不迷路 源码获取&#xff1a;https://pan.baidu.com/s/1aRpOv3f2sdtVYOogQjb8jg?pwdjf1d 提取码: jf1d &#…

FineReport 分栏报表

将报表中的数据根据所需要的展示的样式将数据进行分栏展示列分栏 报表中数据是横向扩展的,超过一页的数据会显示在下一页,而每页下面会有很大的一片空白区域,不美观且浪费纸张。希望在一页中第一行扩展满后自动到下一行继续扩展 1、新建数据集 SELECT * FROM 公司股票2、内…

前端代码分享--爱心

给对象写的&#xff0c;顺便源码给大家分享一下 就是简单的htmlcssjs&#xff0c;不复杂 xin1.html <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>写你自己的</title> <lin…

深入解析机器学习算法

深入解析机器学习算法 机器学习已经成为当今技术进步的核心推动力量&#xff0c;推动了众多行业的创新。其背后依赖的是各种各样的算法&#xff0c;帮助计算机通过从数据中学习来完成任务。这篇文章将对常见的几类机器学习算法进行深入探讨&#xff0c;帮助你理解其工作原理、…

攻防世界的新手web题解

攻防世界引导模式 1、disabled_button 好&#xff0c;给了一个按钮&#xff0c;第一道题目就不会做 看的wp<input disabled class"btn btn-default" style"height:50px;width:200px;" type"submit" value"flag" name"auth&q…

qt 滚动条 美化

qt QScrollBar 滚动条分为竖直与水平滚动条&#xff0c;两者设置上类似&#xff0c;但也有一些不同&#xff0c;下面主要讲述美化及注意事项。 一、竖直滚动条 竖直滚动条分为7个部分&#xff1a; sub-line、 up-arrow 、sub-page、 hanle、 add-line、 dow-arrow、 add-pag…

猴子请来的补丁——Python中的Monkey Patching

猴子补丁&#xff08;Monkey Patching&#xff09;在Python中是一种允许在运行时修改对象行为的技术。这种技术可以在不直接修改原始源代码的情况下&#xff0c;动态地改变或扩展程序的行为。 猴子补丁的原理 猴子补丁的核心原理是利用Python的动态特性&#xff0c;即在运行时…

研究生论文学习记录

文献检索 检索论文的网站 知网&#xff1a;找论文&#xff0c;寻找创新点paperswithcode &#xff1a;这个网站可以直接找到源代码 直接再谷歌学术搜索 格式&#xff1a;”期刊名称“ 关键词 在谷歌学术搜索特定期刊的关键词相关论文&#xff0c;可以使用以下几种方法&#…

Java并发学习总结:原子操作类

本文是学习尚硅谷周阳老师《JUC并发编程》的总结&#xff08;文末有链接&#xff09;。 基本类型原子类 AtomicIntegerAtomicLongAtomicBoolean AtomicInteger 的方法 getAndIncrement 和 incrementAndGet 的区别&#xff1a; 两个方法都能实现对当前值加 1 &#xff0c; 但…

web服务实验

http实验 先创建需要访问的web页面文件index.html 编辑vim /etc/nginx/conf.d/testip.conf 测试通过域名访问需要编辑/etc/hosts 如果通过windows的浏览器访问需要编辑下面的文件通过一管理员身份打开的记事本编辑 C:\Windows\System32\drivers\etc下的hosts文件 192.168.1…

软考:GPU算力,AI芯片

算力 FLOPS&#xff08;每秒浮点操作&#xff09; NVIDIA 去年就有超过 1 exa 的新闻&#xff0c;所以这个数值是越大越好。 AI芯片的技术架构类型 GPU&#xff1a;图形处理单元&#xff0c;擅长并行处理&#xff0c;适用于深度学习等AI计算密集型任务。FPGA&#xff1a;现…