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

news2025/1/21 18:47:16

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.coloradmin.cn/o/1801336.html

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

相关文章

51单片机-LCD液晶显示

目录 前言: 一. LCD1602模块简介 二. 代码功能实现 三.总结 前言: 本文主要是51单片机的LCD液晶显示,使用的是LCD1602.下面是详细介绍和完整代码,欢迎大家的点赞,评论和关注.感谢. 一. LCD1602模块简介 LCD1602 模块具有以下特点&#xff1a; 显示特点&#xff1a; 可以…

Linux系统之部署Blog-Index导航页

Linux系统之部署Blog-Index导航页 一、Blog-Index介绍1.1 Blog-Index简介1.2 Blog-Index特点1.3 Blog-Index使用场景 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍2.3 Yarn介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查系统是否安装yarn 四…

通过调用栈快速探究 Compose 中 touch 事件的处理原理

前言 Compose 视图的处理方式和 Android 传统 View 有很大差别&#xff0c;针对 touch 事件的处理自然也截然不同。 如何在 Compose 中处理 touch 事件&#xff0c;官方已有非常详尽的说明&#xff0c;可以参考&#xff1a;https://developer.android.google.cn/jetpack/comp…

[图解]企业应用架构模式2024新译本讲解11-领域模型4

1 00:00:00,160 --> 00:00:01,870 好&#xff0c;到这里的话 2 00:00:02,620 --> 00:00:05,060 文字处理器的产品对象就生成了 3 00:00:06,880 --> 00:00:09,180 同样下面就是电子表格 4 00:00:10,490 --> 00:00:11,480 电子表格也同样的 5 00:00:11,490 -->…

【Vue】——组件的注册与引用

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

【Java面试】九、微服务篇-SpringCloud(上)

文章目录 1、SpringCloud五大组件2、服务注册和发现2.1 Eurake2.2 Eurake和Nacos的区别 3、Ribbon负载均衡3.1 策略3.2 自定义负载均衡策略 4、服务雪崩与熔断降级4.1 服务雪崩4.2 服务降级4.3 服务熔断 5、服务限流5.1 Nginx限流5.2 网关限流 6、微服务监控7、面试 1、SpringC…

antd vue a-select 搜索

数据结构 list: [{ name: "序号", id: 0, show: true },{ name: "出库单编号", id: 1, show: false },{ name: "wbs元素", id: 2, show: true },{ name: "序号1", id: 3, show: true },{ name: "出库单编号1", id: 4, show…

每天五分钟深度学习pytorch:pytorch中的广播机制是什么?

本文重点 在pytorch中经常有张量和张量之间的运算,那么有一点需要注意,那就是维度要匹配,如果维度不匹配就有可能出现问题。如果维度不一致,此时也可以同时进行操作,此时就需要使用pytorch中的广播机制,本节课程就讲解pytorch中的广播机制。 广播机制示意图 如上就是py…

基于C#的计算机与安捷伦34970A通信方法

概述 安捷伦34970A采集数据&#xff0c;34970A支持RS232接口&#xff0c;但是如果直接用winform自带的seriaport类基本是没必要使用的&#xff0c;安捷伦等仪表通讯需要用到VISA的库。 库的获取 1. 是德科技的IO Library. 2. NI下载NI-VISA. 两者用法接近. 代码如下 using…

【数据分析基础】实验numpy、pandas和matplolib

文件score.xlsx 中存放了学生的各个科目的考试成绩&#xff08;如下图&#xff09;&#xff0c; 1. 编程实现&#xff1a;输入任意一个学号&#xff0c;将该学号对应的成绩&#xff0c;通过雷达图显示。 &#xff08;1&#xff09;程序代码&#xff1a; import pandas as pd…

在Java中使用SeleniumAPI,超详细

Java中 Selenium相关操作 1 定位元素 1.1 css选择器定位元素 就是定位到页面的元素&#xff0c;本质上就是一个一个的语法 下面举几个具体的例子&#xff1a; 类选择器 按照给定的 class 属性的值&#xff0c;选择所有匹配的元素。 语法&#xff1a;.classname 例子&am…

【中篇】从 YOLOv1 到 YOLOv8 的 YOLO 物体检测模型历史

YOLO 型号之所以闻名遐迩,主要有两个原因:其速度和准确性令人印象深刻,而且能够快速、可靠地检测图像中的物体。上回我解释了Yolo v1, 今天从Yolov2开始。 YOLOv2:更好、更快、更强 2017 年 7 月一个闷热的星期二下午,雷德蒙(Joseph Redmon, Yolo创始人)再次走上舞台。 …

MASA:匹配一切、分割一切、跟踪一切

摘要 在复杂场景中跨视频帧稳健地关联相同对象是许多应用的关键&#xff0c;特别是多目标跟踪&#xff08;MOT&#xff09;。当前方法主要依赖于标注的特定领域视频数据集&#xff0c;这限制了学习到的相似度嵌入的跨域泛化能力。我们提出了MASA&#xff0c;一种新颖的方法用于…

嵌入式Linux系统编程 — 3.1 Linux系统中的文件类型

目录 1 Linux 系统中的文件类型简介 2 普通文件 2.1 什么是普通文件 2.2 普通文件分类 3 目录文件 4 字符设备文件和块设备文件 4.1 什么是设备文件 4.2 查看设备文件的方法&#xff1a; 5 符号链接文件&#xff08;link&#xff09; 5.1 什么是符号链接文件 5.2 如…

生成式人工智能 - stable diffusion web-ui安装教程

一、Stable Diffusion WEB UI 屌丝劲发作了,所以本地调试了Stable Diffusion之后,就去看了一下Stable Diffusion WEB UI,网络上各种打包套件什么的好像很火。国内的也就这个层次了,老外搞创新,国内跟着屁股后面搞搞应用层,就叫大神了。 不扯闲篇了,我们这里从git源码直接…

【vscode-快捷键 一键JSON格式化】

网上有很多JSON格式化工具&#xff0c;也有很多好用的在线json格式化工具。但是其实Vscode里面的可以直接格式化JSON&#xff0c;这里分享一个我常用的小插件 Prettify JSON 未格式化的JSON数据 召唤出命令行&#xff0c;输入prettify JSON 即可! ✿✿ヽ(▽)ノ✿

C# WinForm —— 26 ImageList 介绍

1. 简介 图片集合&#xff0c;用于存储图像的资源&#xff0c;并在关联控件中显示出来 可以通过 索引、键名 访问每张图片 没有事件 2. 属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 imgList 开头ClolorDepth用于呈现图像的颜色数&#xff0c;默…

立创小tips

立创小tips 原理图中 1-修改图纸属性 保存完&#xff0c;绘制原理图的界面就出现了&#xff0c;然后我们鼠标点击原理图的边缘变成红色就可以高边表格的属性了。 2-鼠标右键可以移动整个原理图 3-查看封装 点击任意一个元器件&#xff0c;在右侧就会显示封装属性&#xff…

9.1 Go 接口的定义

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于日间-日内不确定集的中长期电源扩展规划》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…