SwiftUI中Mask修饰符的理解与使用

Mask是一种用于控制图形元素可见性的图形技术,使用给定视图的alpha通道掩码该视图。在SwiftUI中,它类似于创建一个只显示视图的特定部分的模板。

Mask修饰符的定义:

func mask<Mask>(
    alignment: Alignment = .center,
    @ViewBuilder _ mask: () -> Mask
) -> some View where Mask : View

alignment:相对于被修饰视图的对齐方式。
mask:呈现系统将其alpha值应用于指定视图的视图。

当想要将另一个视图的alpha(不透明度)值应用到当前视图时,使用mask(_:)修饰符。
mask(_:)修饰符的不透明度决定了它下面视图的可见性。

使用任何形状或视图作为蒙版。

在这里插入图片描述
上面的第二个图采用了一个圆形的蒙版,并将其opacity设置为0.8.
mask()修饰符与clipShape()不同,本案例中mask()修饰符即可以修改形状也可以修改不透明度。而clipShape()只调整视图的外部形状。

使用渐变色做蒙版

mask()修饰符中,我们也可以添加渐变色,下面就是一个动态的Mask

  @State private var fillPercentage: CGFloat = 0.0

  var body: some View {
    VStack {
      ZStack {
        RoundedRectangle(cornerRadius: 25)
          .fill(LinearGradient(gradient: Gradient(colors: [Color.gray.opacity(0.2), Color.gray.opacity(0.5)]), startPoint: .topLeading, endPoint: .bottomTrailing))

        Text("SwiftUI")
          .font(Font.system(size: 100).bold())
          .frame(width: 350, height: 200)
          .overlay(
            Image("Image_3")
              .resizable()
              .frame(width: 350, height: 200)
              .mask(
                LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: UnitPoint(x: 0, y: 1 - fillPercentage), endPoint: UnitPoint(x: 0, y: 1))
              )
          )
          .animation(.easeInOut(duration: 1.0), value: fillPercentage)
      }
      .frame(width: 350, height: 200)
      .cornerRadius(25)
      .shadow(radius: 10)

      Slider(value: $fillPercentage, in: 0...1)
            .padding()
    }
    .padding()
  }

在这里插入图片描述

写在最后

SwiftUI中的Mask功能可以创建复杂的静态或者动态用户界面,这个功能使用好了对于我们的App也是十分增色的,视觉效果也非常好。
本文只是对Mask做了一些简单的理解与使用,有感兴趣的朋友可以继续深入探讨一下。

最后,希望能够帮助到有需要的朋友,如果觉得有帮助,还望点个赞,添加个关注,笔者也会不断地努力,写出更多更好用的文章。

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

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

相关文章

地图之战争迷雾/地图算法/自动导航(一)

战争迷雾 TiledMap 创建黑色覆盖块&#xff0c;然后使用碰撞组件&#xff0c;控制黑色块的显示和隐藏 地图算法 在有些游戏中&#xff0c;地图需要随机生成&#xff0c;比如游戏中的迷宫等&#xff0c;这就需要地图生成的算法&#xff1b;在角色扮演类游戏中&#xff0c;角色…

「Qt Widget中文示例指南」如何实现一个简单的RHI小部件示例(二)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 本文将为大家演示如…

阿里大模型又又又又开源了!这次还是王炸产品!

阿里大模型又双叒叕开源了&#xff1a;刚刚&#xff0c;Qwen2 宣布开源&#xff01; 不到一年时间&#xff0c;阿里云通义千问先后开源近 10 款不同尺寸的大语言模型&#xff0c;之前开源的 Qwen 系列 72B、110B 模型就曾多次登顶 HuggingFace 的 Open LLM Leaderboard 开源模型…

两个不同的TA Instance之间可以共享全局变量吗

答案&#xff1a;不能。 在GP规范里其实是有规定&#xff0c;在不同的TA Instance之间&#xff0c;都是有着各自的physical memory space的&#xff0c;都是相互独立物理地址空间的。 不同的TA instance之间&#xff0c;各自拥有各自的堆空间、可写全局数据段、可写静态数据段。…

Python可视化 | 使用matplotlib绘制面积图示例

面积图是数据可视化中的一个有效工具&#xff0c;用于说明时间上的关系和趋势。它们提供了一种全面的、视觉上迷人的方法&#xff0c;通过熟练地将折线图的可读性与填充区域的吸引力相结合来呈现数值数据。 在本文中&#xff0c;我们将学习更多关于在Python中创建面积折线图的…

前端渲染大量数据思路【虚拟列表】【异步机制】

当浏览器遇到性能瓶颈导致页面卡顿时&#xff0c;你会怎么处理&#xff1f;如何查找问题的原因&#xff1f; 浏览器本身自带性能检测工具&#xff0c;通常我们分析由脚本导致的页面卡顿会选择 性能&#xff08;performance&#xff09; 选项卡&#xff0c;在其中我们可以找到导…

从诺曼底登陆八十周年说起

昨天&#xff08;2024年6月6日&#xff09;是诺曼底登陆&#xff08;Normandy Campaign&#xff09;八十周年纪念日。媒体上有很多对相关纪念活动的报道。 诺曼底登陆战役&#xff0c;是第二次世界大战也是世界战争史上规模最大的登陆战役。敦刻尔克大撤退后&#xff0c;西欧大…

Qt Window Dialog 无标题栏 ,无边框,可拖动

1.效果&#xff1a; 2. 主要实现步骤&#xff1a; 设置窗口 flag&#xff1a; this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint); 创建变量存储位置 QPoint m_dragPosition; 对鼠标左键按下和移动事件做处理 void DraggableDialog::mousePre…

【Linux操作系统】Linux中进程的五种状态:R、S、D、T、X以及僵尸进程、孤儿进程

操作系统中有许多同时执行的进程&#xff0c;这些进程都可能处于不同的状态代表着不同的含义。 R运行状态(running) 概念&#xff1a;并不意味着进程一定在运行中&#xff0c;它表明进程要么是在运行中要么在运行队列里。 我们运行可执行程序myproc利用指令 ps ajx可以看到进程…

Java 18 新功能概述

Java 18 在 2022 年 3 月 22 日正式发布&#xff0c;Java 18 不是一个长期支持版本。 包含多项新特性和改进&#xff0c;如文件系统链接、文本块、表达式求值API、ForkJoinPool优化、Optional新方法等。 亮点还包括预览特性&#xff1a;Record Pattern Matching for Switch和增…

Elastic Search(ES)Java 入门实操(3)数据同步

基本概念和数据查询代码&#xff1a; Elastic Search &#xff08;ES&#xff09;Java 入门实操&#xff08;1&#xff09;下载安装、概念-CSDN博客 Elastic Search&#xff08;ES&#xff09;Java 入门实操&#xff08;2&#xff09;搜索代码-CSDN博客 想要使用 ES 来查询数…

为什么会有虚像

本来我就打算写虚像相关的内容&#xff0c;实际上我看不懂光学的内容&#xff0c;我只是发觉书上没有使用变分法来做&#xff0c;而只是解析几何的变换&#xff0c;这个做法完全脱离实际&#xff0c;物理书为什么会这样写不知道原因&#xff0c;但是很明显这样的内容也非常的复…

操作系统复习-存储管理之段页式存储管理

存储管理之段页式存储管理 页式存储管理(等分划分) 字块是相对物理设备的定义页面则是相对逻辑空间的定义指的都是大小一样的一块内存页式存储管理是将进程逻辑空间等分成若干大小的页面相应的把物理内存空间分成与页面大小的物理块以页面为单位把进程空间装进物理内存中分散的…

【MySQL】常见可执行程序

本文使用的版本是MySQL8&#xff0c;5.7可能会有所不同。 MySQL提供了一些重要的程序用来管理和操作数据库。这里会介绍一些常用的程序及其使用。对于MySQL程序的使用&#xff0c;可以查看官方帮助手册来学习。 MySQL :: MySQL 8.0 Reference Manual :: 6 MySQL Programs 程序…

normalizing flows vs 直方图规定化

normalizing flows名字的由来 The base density P ( z ) P(z) P(z) is usually defined as a multivariate standard normal (i.e., with mean zero and identity covariance). Hence, the effect of each subsequent inverse layer is to gradually move or “flow” the da…

C# Maui 报错:程序“[15748] MauiApp1.exe”已退出,返回值为 2147942405 (0x80070005)

“MauiApp1.exe”(CoreCLR: DefaultDomain): 已加载“C:\Program Files\dotnet\shared\ Microsoft.NETCore.App\8.0.6\System.Private.CoreLib.dll”。 “MauiApp1.exe”(CoreCLR: clrhost): 已加载“E:\cDemo\MauiApp1\MauiApp1\bin\Debug\net8.0-windows10.0.19041.0\win10-x…

数智融通 创新发展|亚信科技携AntDB、Data OS与隐私计算产品,赋能企业高质量发展

5月21日&#xff0c;亚信科技在云端举办了一场别开生面的研讨会——“数智融通 创新发展”&#xff0c;聚焦企业数智化升级的前沿话题。资深产品经理和技术架构师们面对面深入交流&#xff0c;分享创新成果与实战案例&#xff0c;共同探索企业数智化转型的新路径。 图1&#xf…

重构某测试站点

一、计算校验值 校验值结果&#xff1a; 文件名称&#xff1a;培训用centos.rar&#xff0c;文件大小&#xff1a;1,335,759,953&#xff0c;MD5&#xff1a;534EC38CDA7DA2196C84AC8F6092514B&#xff0c;SHA1&#xff1a;FD35D86A27A007AE10872980C48653A110DF6067&#xf…

【Ardiuno】ESP32单片机初试点亮LED小灯

之前用的Ardiuno的主板做过一些简单的开发实验&#xff0c;按照相关说明还是很容易进行操作的。最近看了ESP32可以有wifi的功能&#xff0c;也就买来实验一下。 ESP32的主板开发环境安装&#xff0c;按照说明的安装下载程序总是报错&#xff0c;又上网搜索半天最后按照CSDN上某…

算法006:查找总价格为目标值的两个商品

. - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/he-wei-sde-liang-ge-shu-zi-lcof/ 题干说的很复杂&#xff0c;简化一…