SwiftUI之深入解析如何使用visualEffect视图修饰符

一、visualEffect 简介

  • 在 WWDC 23 中,SwiftUI 引入了一个名为 visualEffect 的新视图修饰符,此修饰符允许通过访问特定视图的布局信息来附加一组可动画化的视觉效果。那么,如何在 SwiftUI 中使用新的 visualEffect 视图修饰符呢?
  • 首先看一下,visualEffect 视图修饰符的最简单示例:
struct ContentView: View {var body: some View {Text("Hello World!").visualEffect { initial, geometry ininitial.offset(geometry.size)}}
}
  • 正如在上面的示例中所看到的,定义了一个文本视图并附加了 visualEffect 视图修饰符,每当附加 visualEffect 视图修饰符时,应该指定效果闭包,这是应用所有需要的效果的地方。
  • 效果闭包提供了两个参数:第一个是附加到视图的效果集合的初始状态,它是 EmptyVisualEffect 类型的实例,使用此实例来附加额外的效果;第二个参数是包含视图的所有布局信息的 GeometryProxy 类型的实例,比如 frame、安全区域等。

二、什么是视觉效果?

  • 视觉效果是可以改变视图的视觉外观但不影响其布局的任何东西。在 SwiftUI 框架的先前版本中,有视图修饰符,如缩放、偏移、模糊、对比度、饱和度、不透明度、旋转等,它们全部都是视觉效果,并且现在符合 VisualEffect 协议,当然可以在 visualEffect 闭包中使用其中任何一个。
struct ContentView: View {var body: some View {Text("Hello World!").visualEffect { initial, geometry ininitial.blur(radius: 8).opacity(0.9).scaleEffect(.init(width: 2, height: 2))}}
}
  • 像 frame 和 padding 这样的东西不是视觉效果,不能在 visualEffect 闭包中使用它们,因为它们修改了视图层次结构的布局。

三、visualEffect 修饰符视觉效果

  • visualEffect 视图修饰符是完成旧事物的新方法,可以使用旧视图修饰符修改视图的不透明度和偏移。如果不需要布局信息,可以继续使用它们,新方法的唯一区别是通过从 GeometryProxy 提供的布局信息计算视图的视觉效果的方式来限定视图的视觉效果。
  • visualEffect 视图修饰符支持可动画化的值,因此可以继续使用它根据视图在视图层次结构中的框架和边界来动画化视图的视觉外观。
struct ContentView: View {@State private var isScaled = falsevar body: some View {VStack {Button("Scale") {isScaled.toggle()}Text("Hello World!").visualEffect { initial, geometry ininitial.scaleEffect(CGSize(width: isScaled ? 2 : 1,height: isScaled ? 2 : 1))}.animation(.smooth, value: isScaled)}}
}

四、完整示例

  • 将如下的代码放入 Swift 文件中,然后在 Xcode 中打开并运行,选择合适的模拟器。请注意,由于视觉效果和动画效果,最好在模拟器上查看效果。
import SwiftUIstruct ContentView: View {var body: some View {Text("Hello World!").visualEffect { initial, geometry ininitial.offset(geometry.size)}}
}struct ContentViewWithEffects: View {var body: some View {Text("Hello World!").visualEffect { initial, geometry ininitial.blur(radius: 8).opacity(0.9).scaleEffect(.init(width: 2, height: 2))}}
}struct ContentViewWithAnimation: View {@State private var isScaled = falsevar body: some View {VStack {Button("Scale") {isScaled.toggle()}Text("Hello World!").visualEffect { initial, geometry ininitial.scaleEffect(CGSize(width: isScaled ? 2 : 1,height: isScaled ? 2 : 1))}.animation(.smooth, value: isScaled)}}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()ContentViewWithEffects()ContentViewWithAnimation()}
}

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

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

相关文章

超简单|配图详细| 双系统Ubuntu22.04 系统磁盘扩容

文章目录 1. 打开磁盘工具2. 格式化空闲分区3. 挂载该分区4. 数据迁移与备份5. 卸载原分区6. 挂载新的/home分区7. 重启系统8. 删除原来的数据8.1 直接格式化分区8.2 没有单独的/home分区1. 查看设备名2. 重新挂载该分区3. 删除原始分区/home目录中的内容4. 卸载原分区5. 重启 …

关于无人机上层控制的PID算法的思考

一、前言 背景介绍:PID虽然出现了很多年,但是目前工业界还是把PID作为主流的控制算法(尽管学术界有很多非常时尚的控制算法,包括鲁邦控制,神经网络控制等等),PID的算法在于其不需要对系统进行复…

使用 PHP-FFMpeg 操作视频/音频文件

做音频合成的时候找到的一个php操作ffmpeg 的类库。GitHub地址:https://github.com/PHP-FFMpeg/PHP-FFMpeg/。本文的例子大部分都是上面的 在使用之前请安装好 FFMpeg 。如何安装?请看 FFmpeg 安装教程。 使用composer快速安装 > composer require …

netty使用http和webSocket

1&#xff1a;pom.xml配置 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.73.Final</version></dependency>2&#xff1a;Netty作为HTTP服务器 import io.netty.bootstrap.Server…

【Spring实战】20 Spring Data REST+JPA构建基础的RESTful API

文章目录 1. 基础概念1&#xff09;Spring Data REST2&#xff09;JPA&#xff08;Java Persistence API&#xff09; 2. 添加依赖3. 创建JPA实体4. 创建JPA Repository5. 启用Spring Data REST6. 启动服务7. 测试8. 总结 Spring Data REST 是 Spring Framework 生态系统中的一…

加密算法和身份认证

前瞻概念 在了解加密和解密的过程前&#xff0c;我们先了解一些基础概念 明文&#xff1a;加密前的消息叫 “明文” &#xff08;plain text&#xff09;密文: 加密后的文本叫 “密文” (cipher text)密钥: 只有掌握特殊“钥匙”的人&#xff0c;才能对加密的文本进行解密,这里…

【深度学习:(Contrastive Learning) 对比学习】深入浅出讲解对比学习

对比学习允许模型从未标记的数据中提取有意义的表示。通过利用相似性和不相似性&#xff0c;对比学习使模型能够在潜在空间中将相似的实例紧密地映射在一起&#xff0c;同时将那些不同的实例分开。这种方法已被证明在计算机视觉、自然语言处理 &#xff08;NLP&#xff09; 和强…

每天刷两道题——第六天

1.1字母异位词分组 给你一个字符串数组&#xff0c;将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词指的是由重新排列源单词的所有字母得到的一个新单词。 输入: strs [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”] 输出: [[“bat”],[“nat”,…

STM32和ESP8266的WiFi模块控制与数据传输

基于STM32和ESP8266 WiFi模块的控制与数据传输是一种常见的嵌入式系统应用。在这种应用中&#xff0c;STM32作为主控制器负责控制和与外部传感器交互&#xff0c;而ESP8266 WiFi模块则用于实现无线通信和数据传输。本文将介绍如何在STM32上控制ESP8266模块&#xff0c;建立WiFi…

如何定义封装全局组件

这里以封装的svg组件为例 在src文件夹目录下创建一个index.ts文件&#xff1a;用于注册components文件夹内部全部全局组件&#xff01;&#xff01;&#xff01; import SvgIcon from ./SvgIcon/index.vue; import type { App, Component } from vue; const components: { [na…

3D 纹理的综合指南

在线工具推荐&#xff1a;3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 我们经常看到超现实主义的视频游戏和动画电影角色出现在屏幕上。他们皮肤上的…

【Redux】自己动手实现redux和react-redux

1. React提供context的作用 在class组件的世界里&#xff0c;如果后代组件共享某些状态&#xff0c;比如主题色、语言键&#xff0c;则需要将这些状态提升到根组件&#xff0c;以props的方式从根组件向后代组件一层一层传递&#xff0c;这样则需要在每层写props.someData&#…

Java Arrays.copyOfRange的用法

Arrays.copyOfRange的使用方法&#xff1a; 将一个数组拷贝至另一个数组中 参数&#xff1a; original&#xff1a;第一个参数为要拷贝的数组对象 from&#xff1a;第二个参数为拷贝的开始位置&#xff08;包含&#xff09; to&#xff1a;第三个参数为拷贝的结束位置&#x…

django websocket

目录 核心代码 consumers.py from channels.generic.websocket import WebsocketConsumer from channels.exceptions import StopConsumer import datetime import time from asgiref.sync import async_to_sync class ChatConsumer(WebsocketConsumer):def websocket_conne…

ssm基于vue框架和elementui组件的手机官网论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本手机官网就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&#x…

Java 面向对象的三大特征之继承和多态

3、继承 extends 3.1什么是继承&#xff0c;有什么用&#xff1f; 继承&#xff1a;在现实世界当中也是存在的&#xff0c;例如&#xff1a;家里有矿&#xff0c;不用很努力也可以继承。 继承的作用&#xff1a; 基本作用&#xff1a;子类继承父类&#xff0c;代码可以得到复用…

java基础之Java8新特性-Lambda

目录 什么是Lambda表达式 Lambda表达式规范 基本语法 参数列表 函数体 注意事项 如何定义函数接口 1.保证接口中只能有一个抽象方法 2.使用FunctionalInterface注解标记该接口为函数接口 使用Lambda调用无参函数 使用Lambda调用有参函数 使用Lambda的精简写法 使用…

Linux第3步_安装Ubuntu操作系统

创建好虚拟机后&#xff0c;就可以安装Ubuntu操作系统了。 1、双击“VMware Workstation Pro”&#xff0c;得到下面的界面。 2、点击“编辑虚拟机设置”&#xff0c;见下图&#xff1a; 3、等几秒钟&#xff0c;得到下面的界面&#xff1a; 4、点击“CD/DVD”&#xff0c;得到…

vscode无识别已有的maven java项目(visual studio code not recognizing java project)

文章目录 事情经过尝试疑惑问题解决结论 事情经过 未安装任何Java Extension Pack使用 Maven 的 archetype:generate 命令来创建一个新的项目使用vscode打开了该目录然后安装Java Extension Pack等java插件配置了vscode settings.json中的 java.configuration.runtimes和 java…

Ubuntu envs setting

1. change the chmod of folders sudo chown -R $USER:$USER /home/anaconda3 2. torch.cuda.is_available()返回false change conda installation to pip. zai qi ta huan jing pei zhi dou mei wen ti de qing kuang xia , zai shi shi zhe ge fang fa. # CUDA 11.7 con…