首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

SwiftUI Horizontal onTapGesture在其后面的垂直滚动视图上注册点击

SwiftUI是苹果公司推出的一种用户界面(UI)框架,用于构建iOS、iPadOS、macOS、watchOS和tvOS应用程序。它采用声明式语法,简化了界面的构建过程,并提供了丰富的UI组件和功能。

在SwiftUI中,可以使用onTapGesture修饰符为视图添加点击手势。而Horizontal是一个容器视图,用于水平排列其子视图。垂直滚动视图可以使用ScrollView来实现。

要在Horizontal容器视图的后面的垂直滚动视图上注册点击手势,可以按照以下步骤进行操作:

  1. 创建一个@State属性,用于跟踪点击手势的状态。例如:@State private var isTapped = false
  2. Horizontal容器视图后面添加一个ScrollView,并将其包装在ZStack中,以便能够在其上添加手势。例如:
代码语言:txt
复制
ZStack {
    Horizontal {
        // 水平排列的子视图
    }
    ScrollView {
        // 垂直滚动的子视图
    }
    .onTapGesture {
        // 点击手势的处理逻辑
        self.isTapped = true
    }
}
  1. 在点击手势的处理逻辑中,可以根据需要执行相应的操作,例如更新状态变量isTapped的值,或者执行其他操作。

关于SwiftUI的更多信息,可以参考腾讯云的官方文档和教程:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

SwiftUI 中掌握 ScrollView 的使用:滚动可见性

要了解有关 scrollTargetLayout 视图修饰符的更多信息,请查看我的文章《掌握 SwiftUI 中的 ScrollView:滚动几何》。...有时,视图需要在其可见性状态在 ScrollView 中发生变化时进行响应。...对于这些情况,SwiftUI 框架引入了 onScrollVisibilityChange 视图修饰符,你可以将其附加到 ScrollView 内的任何视图上以处理其可见性。...此外,在页面底部有一个视频播放器,当视频播放器出现在口内时,它会自动播放,当其离开口时,会自动暂停。总结今天,我们学习了如何跟踪 ScrollView 内特定视图的可见性,并监控可见标识符列表。...示例展示了如何使用 SwiftUI滚动可见性修饰符来增强用户体验和交互性。希望能对你有所帮助。

15710

掌握 ViewThatFits

比如,对于下面的代码,用更符合开发者主观目标的语言来描述就是: ViewThatFits(in: .horizontal) { Text("Hello Beautiful World")...ScrollView:如果理想状态的轴与滚动方向一致,则在滚动方向上一次性展示所有的子视图而无视父视图的建议尺寸。 VStack、HStack、ZStack:所有子视图在理想状态下的整体呈现。...SwiftUI 提供了两个版本的 fixedSize ,我们当前使用的版本要求视图在水平和垂直两个轴向上都使用理想尺寸,而另一个版本允许我们对单个轴向进行限定。...自适应滚动 通过下面的代码,我们可以实现在内容宽度超过给定宽度时,自动进入可滚动状态。...选定了子视图,子视图中的 logo 会根据 ViewThatFits 提供的尺寸,在最终的呈现时调整自己的尺寸。

19910
  • SwiftUI中使用UIKit视图

    SwiftUI中使用UIKit视图 如想获得更好的阅读体验可以访问我的博客www.fatbobman.com,或点击下方的阅读原文 已迈入第三个年头的SwiftUI相较诞生初始已经提供了更多的原生功能...在makeUIVIew执行,updateUIVew必然会执行一次•dismantleUIView在UIViewRepresentable视图被移出视图树之前,SwiftUI会调用dismantleUIView...同样也可以通过注册观察器、订阅Publisher等方式获取所需的信息。...当点击Random Name引起name变化时,SwiftUI将会调用updateUIView,而我们并没有在其中做任何的处理。...不过有以下几点需要注意: •如何改变View内的的值(View是结构)•如何处理返回的类型(保证调用链继续有效)•如何利用SwiftUI框架现有的数据并与之交互逻辑 为了更全面的演示,下面的例子,采用了不同的处理方式

    8.2K22

    SwiftUI 的方式进行布局

    最近时常有朋友反映,尽管 SwiftUI 的布局系统学习门槛很低,但当真正面对要求较高的设计需求时,好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗?...padding 是在布局层面进行的调整,添加 padding 的视图,同时也会对其他视图的布局产生影响。...offset 则是在渲染层面进行的位置调整,即使出现了位置变化,其他视图在布局时,并不会将其位移考虑在其中。...有关这方面的内容,请参阅 SwiftUI 布局 —— 尺寸( 下 )[4] 一文中“面子和里子”章节。...四、ScrollView 考虑到本文需求的动画形态( 竖向滚动 ),使用 ScrollViewReader 提供的滚动定位功能,同样可以满足需求。

    3.3K00

    SwiftUI 的方式进行布局

    最近时常有朋友反映,尽管 SwiftUI 的布局系统学习门槛很低,但当真正面对要求较高的设计需求时,好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗?...大致效果如下: 图片 解决方案 对于上面的需求,相信不少读者都会在第一时间想出多个解决方案。下文中,我们将用 SwiftUI 布局系统提供的多种手段来实现该要求。...padding 是在布局层面进行的调整,添加 padding 的视图,同时也会对其他视图的布局产生影响。...offset 则是在渲染层面进行的位置调整,即使出现了位置变化,其他视图在布局时,并不会将其位移考虑在其中。...有关这方面的内容,请参阅 SwiftUI 布局 —— 尺寸( 下 ) 一文中“面子和里子”章节。

    4.8K80

    AVKit框架详细解析(四) —— 基于AVKit 和 AVFoundation框架的视频流App的构建

    每当您将其设置为非 nil 值时,就会显示全屏封面的内容。...构建并运行,然后滚动到feed的底部以找到 キツネ村(kitsune-mura)或 Fox Village 视频。 这就是 VideoPlayer 的美妙之处; 您只需要一个 URL,就可以开始了!...转到 LoopingPlayerView.swift,您将在其中找到一个用于显示视频的空视图。 它需要一组视频 URL 才能播放。...如果你完全不熟悉 KVO,这里有一个简单的解释:基本思想是你在特定属性的值发生变化时注册通知。 在这种情况下,您想知道播放器的 currentItem 何时发生变化。...addAllVideosToPlayer() } } 在这里,每次播放器的 currentItem 属性更改时,您都会注册一个block来运行。

    7K10

    SwiftUI 4.0 的全新导航系统

    ⚠️ 在使用堆栈管理系统的情况下,请不要在编程式导航中混用声明式导航,这样会破坏当前的视图堆栈数据 下面的代码,如果点击声明式导航,将导致堆栈数据重置。...4.0 中,在 List 绑定了数据,通过 List 构造方法创建的循环或 ForEach 创建的循环中的内容( 不能自带点击属性,例如 Button 或 onTapGesture ),将被隐式添加...tag 修饰符,从而具备点击可更改绑定数据的能力 无论将 List 放置在 NavigationSplitView 的最左侧一栏( 双栏模式 )还是左侧两栏中( 三栏模式 ),都可以通过 List...不同的角色将让 toolbar 的外观和排版有所不同( 设备而异 )。...到了 SwiftUI 4.0 版本SwiftUI 已经将其真正的视为了 Button 。

    10.3K62

    WWDC 23 ,SwiftUI 5 和 SwiftData 的初印象

    革命性的动画和视觉效果升级 SwiftUI 原本欠缺一些高级的动画和视觉功能在本次升级中一并被补上了,而且苹果大幅更新了动画、转场、Shape、效果等方面的内部实现。...大幅改善了 ScrollView 的控制力 本次升级中,为 ScrollView 带来了新的动态滚动定位系统( 不依赖 ScrollViewReader 和显式的 id 声明)、一次性的定位系统( 在视图进入...)、支持分页滚动( 开发者长期盼望的 )、自定义滚动内容的缩进、为滚动内容(非滚动容器)添加安全区域等众多功能。...从我这两天的使用来看,在其功能和稳定性得到进一步改善和增强的情况下,它确实会给开发者带来更多的便利。...SwiftData 的问题和注意事项( 原文发表在推文中,没有进行更系统的归纳): 尚不支持公共和共享数据的云同步 在当前版本中,通过其他上下文(ModelContext)创建的数据并不会自动合并到视图上下文中

    1.1K20

    WWDC 23 ,SwiftUI 5 和 SwiftData 的初印象

    革命性的动画和视觉效果升级 SwiftUI 原本欠缺一些高级的动画和视觉功能在本次升级中一并被补上了,而且苹果大幅更新了动画、转场、Shape、效果等方面的内部实现。...大幅改善了 ScrollView 的控制力 本次升级中,为 ScrollView 带来了新的动态滚动定位系统( 不依赖 ScrollViewReader 和显式的 id 声明)、一次性的定位系统( 在视图进入...)、支持分页滚动( 开发者长期盼望的 )、自定义滚动内容的缩进、为滚动内容(非滚动容器)添加安全区域等众多功能。...从我这两天的使用来看,在其功能和稳定性得到进一步改善和增强的情况下,它确实会给开发者带来更多的便利。...SwiftData 的问题和注意事项( 原文发表在推文中,没有进行更系统的归纳): 尚不支持公共和共享数据的云同步 在当前版本中,通过其他上下文(ModelContext)创建的数据并不会自动合并到视图上下文中

    37910

    使用 SwiftUI 的 Eager Grids

    单元格视图仅在它们被滚动时创建,并且在它们滚动时停止计算。 这篇文章的主题 Eager Grids 正好相反。SwiftUI 不在乎它们是在屏幕上还是在屏幕外。所有视图都被同等对待。...当没有布局容器存在时,SwiftUI 会隐式使用 VStack。...在下面的示例中,绿色单元格在其水平维度上不受限制,因此它使用了所有可用空间。网格尽可能地增长,绿色单元格填充空间。然而,蓝色单元格被框架修改器限制为 50.0 pt 宽度。虚线表示网格边界。...请注意,在这种情况下,对齐方式只是垂直的。此行中的单元格将结合 Grid 参数和 GridRow 参数。行的垂直对齐将优先于对齐的网格垂直组件。...在下面的示例中,具有 .topTrailing 值的网格与 .bottom 垂直行值相结合,会导致第二行中的单元格以 .bottomTrailing 对齐。

    4.4K20

    零基础入门 23: UGUI ScrollView

    因为我准备为大家制作一个垂直滚动视图作为示例,所以这里我增加了一个垂直的布局组件。 ?...运行看看效果吧 ? 从Unity为大家提供的控件来看,和我们手作的区别,在于现成的组件已经把结构都为大家搭建完毕,并且为大家创建好了两个滚动条以为区分显示和使用。...Horizontal:水平滚动开关 Vertical:垂直滚动开关 Movement Type:滚动类型,默认是Elastic,即有弹性的滚动 Elasticty:弹性系数 Inertia:惯性开关 Deceleration...Rate:惯性减速系数 Scroll Sensitivity:滚动的灵敏度 Viewport:Horizontal/Vertical ScrollBar:分别是水平和垂直滚动条 好了,掌握了今天的内容...如果忘记了也没关系,可以通过公众号下方菜单栏,Unity零基础入门,点击进入UGUI专题复习即可。 下期开始,将对实际项目中有用的组件或一些功能组件进行分享。

    3.1K20

    鸿蒙应用开发-初见:ArkUI

    比如上面卡片分左右两大部分选用合适的容器组件进行页面描述针对拆解出来的每个部分重复上面的两步,直到无法拆解只能使用基本组件描述为止比如上面的卡片可以进行如下的拆分整体是一个Row容器,分为左右两大部分,...想了解更多Flutter的布局原理可以查看 深入理解 Flutter 布局约束 SwiftUI中的View布局原理参考SwiftUI中的布局原理可以参考下图。...后续的布局、绘制都是在Render树上进行的⑤ 实现真正的渲染并显示绘制结果按钮点击到更新显示(⑥~⑪)⑥ 点击事件传递到组件,组件的onClick事件方法被触发执行⑦ 由于onClick事件方法中@State...:子元素在垂直方向居中对齐VerticalAlign.Bottom:子元素在垂直方向底部对齐层叠布局(Stack)层叠布局主要用于实现基于Z轴的布局,容器中的子元素(子组件)依次入栈,一个子元素覆盖前一个子元素...color: '#6699FF' }) } .height('100%').margin({ left: 30 }) }}创建列表(List)列表容器是为了高效处理长列表的容器,能支持横向、竖向滚动

    22510

    SwiftUI TextField 进阶 —— 事件、焦点、键盘

    在多个的 TextFiled 之间切换焦点 通过使用 focused 和 onSubmit 的结合,我们可以实现当用户在一个 TextField 中输入完成点击return),自动让焦点切换到下一个...在 SwiftUI 3.0 之前,我们必须在主视图上另外绘制或者使用非 SwiftUI 的方式来解决问题,在 SwiftUI 3.0 中,由于添加了原生设置键盘辅助视图(下文具体介绍)的功能,解决上述问题将不再困难...另外,有时候为了提高交互体验,我们可以希望用户在录入结束,无需点击return按键,通过点击屏幕其他区域或者以滚动列表的方式来取消键盘。同样也需要使用编程的方式让键盘消失。....buttonStyle(.bordered) } .padding(.horizontal...但 toolbar 及 ToolbarItem 的 ResultBuilder 的限制太多,无法在其中进行更复杂的逻辑判断。将键盘辅助视图集成到 toolbar 的逻辑中也有些令人令人费解。

    13.3K10

    一文彻底搞懂js中的位置计算

    scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应口中所用内容所需的最小高度。...属性可以获取或设置一个元素的内容垂直滚动的像素数....例如,不论页面是否有垂直/水平滚动,当你点击客户端区域的左上角时,鼠标事件的 clientX/Y 值都将为 0 。...如果元素的文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。...当计算边界矩形时,会考虑口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top 和 left 属性值就会随之立即发生变化(因此,它们的值是相对于口的,而不是绝对的) 。

    3.8K10

    师于源码 | Flutter 区域口双向滑动

    比如 AndroidStudio 的文件树和编辑器区域,当宽度较窄时,水平方向通过拖拽底部滚动条来滚动口。...打开文件,可以通过 AndroidStudio 的 Structure 页签,快速掌握当前文件中的类型结构信息。...实现由于 debugger 功能需要支持单行的调试,以及点击方法时进行跳转。代码是作为行列表数据存在的,Lines 组件通过 ListView 对数据进行渲染。...也有由于这一点,之前一直没能实现区域口双向滑动的功能。下面是在竖直方向上 ScrollBar 构造时存在的一行代码:可以只监听竖直滚动的通知,忽略水平方滚动向通知。...如下所示,蓝色区域内有一行文字,当窗口宽度缩小到文本溢出时,底部会呈现滑动条支持水平滑动: 这里先总结一下实现区域口的双向滚动的步骤: 需要两个可滑动的口: SingleChildScrollView

    50120

    怎样才算是个出色的移动网站

    让用户先探索、表态 研究参与者对那些要求先行注册才能查看内容的网站感到失望,尤其是在他们不熟悉网站品牌的情况下。 尽管对您的业务而言客户信息不可或缺,但过早索要可能导致注册量减少。...为复杂任务使用点击呼叫按钮 在具备呼叫能力的设备上,点击呼叫链接可让用户通过简单地触按链接来拨打电话。在大多数移动设备上,用户会在拨号前收到确认,或者为用户提供一个菜单,询问用户应如何处理号码。...研究参与者发现混合使用桌面和移动优化页面的网站甚至比单纯使用桌面页面的网站还要难以使用。 别让用户进行捏拉缩放 用户对垂直滚动网站感到顺手,水平滚动则不然。 避免使用大型、固定宽度的元素。...不要创建只能在特定口宽度下正常显示的内容。强制用户水平滚动的网站无法通过 Google 移动易用性测试,可能对其搜索排名产生不良影响。...研究参与者试图预订其他城市的酒店,而旅行网站却在检测到其位置改为提供其所在城市的酒店,这令他们感到困惑。

    2K50

    PyQt5编程扩展 3.2 资源文件的使用

    “关闭”  层次结构 布局 布局前窗体 选中frame,设定水平布局 窗体总布局 点击窗体空白处,选中窗体,按垂直布局按钮,将窗体总布局设为垂直布局 适当缩小窗体 关闭按钮功能 点Edit...icon属性 点击icon右侧的输入框,点击右侧下拉箭头,然后点选择资源  选择322.bmp当图标 设好,按钮就有图标了 同样,为关闭按钮选择132.bmp作为图标 资源文件的编译 窗体UI...文件用到了资源文件,只能在Qt目录下进行编译 编译前 编译窗体文件 拷贝编译的窗体文件和资源文件 将编译的两个py文件拷贝到e:\baikejia\bkj3-2目录中 打开Ui_Widget.py...代码如下:   运行程序 现在里面的按钮都是没有用的,注意看左上角的图标  设置应用程序图标 增加如上红框内两段代码,运行程序,发现图标变了 增加如下human相关代码 年龄设置滚动条 在Qt...中 在Eric6中添加代码 设置姓名按钮 在Qt中 在Eric6中添加代码 自定义信号 添加红色框中代码 运行程序 年龄设置 点击年龄滚动条,可以看到下面两个框框内的变化 姓名设置

    79720
    领券