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

SwiftUI:使用LongPressGesture显示类似Pinterest的上下文菜单

SwiftUI是苹果公司于2019年推出的一套用于构建用户界面的框架,它可以用于开发iOS、macOS、watchOS和tvOS应用程序。SwiftUI采用声明式的方式来描述用户界面,可以大大简化界面开发过程,提高开发效率。

在SwiftUI中,使用LongPressGesture可以为视图添加长按手势,通过长按手势,我们可以实现类似Pinterest的上下文菜单。长按手势是一种常用的用户交互方式,用户可以长按屏幕或者特定的视图元素来触发某种操作或者显示菜单。

使用LongPressGesture来显示类似Pinterest的上下文菜单,可以按照以下步骤进行操作:

  1. 在SwiftUI视图中,为需要添加长按手势的元素(例如图片、按钮等)添加一个长按手势修饰符:
代码语言:txt
复制
gesture(LongPressGesture().onEnded { _ in
    // 执行长按手势后的操作,例如显示菜单
})
  1. 在长按手势的闭包中,可以执行长按手势后的操作,例如显示上下文菜单。可以使用SwiftUI中的Menu控件来实现上下文菜单的显示:
代码语言:txt
复制
Menu(content: {
    Button(action: {
        // 点击菜单项的操作
    }) {
        Text("菜单项1")
    }
    Button(action: {
        // 点击菜单项的操作
    }) {
        Text("菜单项2")
    }
}) {
    // 菜单显示的视图
}

通过上述代码,当用户长按某个元素时,会触发长按手势,然后显示出类似Pinterest的上下文菜单。在菜单中,可以添加不同的菜单项,并为每个菜单项添加点击操作。

关于SwiftUI和LongPressGesture的更多信息,可以参考腾讯云开发者文档中的相关章节:

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

相关·内容

SwiftUI Overlay Container 2 —— 可定制、高效、便捷视图管理器

设计动机 当我们需要在视图上层显示内容(例如:弹出信息、侧边菜单、帮助提示等)时,有很多优秀第三方解决方案可以帮助我们分别实现,但没有一个方案可以同时应对不同场景需求。...在 SwiftUI 中,描述视图已经变得十分容易,因此我们完全可以将上述场景中显示逻辑提炼出来,创建出一个可以覆盖更多使用场景库,帮助开发者组织视图显示风格和交互逻辑。...容器显示类型( Display type ) stacking 当容器内同时显示多个视图时,视图沿 Z 轴排列。其表现同 ZStack 类似。...使用者通过调用容器管理器特定方法,让指定容器执行显示视图、撤销视图等工作。 容器管理器环境值 在 SwiftUI 中,视图代码通过环境值调用容器管理器。...animation 在 SwiftUI 视图外使用 如果想在 SwiftUI 视图之外调用容器管理器,可以直接调用 ContainerManager 单例: let manager = ContainerManager.share

2.1K20

探索 SwiftUI 基本手势

前言 在 SwiftUI 中,我们可以通过添加不同交互来使我们应用程序更具交互性,这些交互可以响应我们点击,点击和滑动。...Circle() .onTapGesture { // Respond to Tap Gesture } SwiftUI 文档中使用其他选项是通过创建手势并将其配置为属性,然后将其与...我们可以设置一个最小持续时间,以识别我们长按手势。可以在 LongPressGesture 初始化程序中进行设置。...LongPressGesture(minimumDuration: 2) 然后,我们可以使用 .updating 方法在长按期间执行操作,并使用 .onEnded 在识别到我们手势时执行操作。...在此示例中,我将在长按操作期间更新 Circle() 大小和颜色,并且当识别出手势时,我将显示“文本已完成”。

2.2K10
  • 使用 SwiftUI 为 macOS 创建类似于 App Store Connect 选择器

    我希望构建类似于 App Store Connect 中选择器组件,使用户体验尽可能熟悉,并在本文中,将展示如何使用 SwiftUI 为 macOS 构建了这个组件。...创建选择器组件让我们分析一下,我们有一组想要在 SwiftUI 列表中显示构建。每个构建都包含一组属性,其中之一是 betaGroups,它是一个表示构建所属测试群组结构体数组。...使用 .overlay 修改器在用户悬停在测试群组组件上时显示一个移除按钮。该按钮从构建所属测试群组列表中移除测试群组。...以上代码片段使用了 BetaGroup 结构体上一个名为 displayName 属性来显示测试群组名称,类似于在 App Store Connect 中显示方式,显示名称中前两个单词首字母大写...总结文章介绍了如何使用 SwiftUI为macOS 创建类似于 App Store Connect 选择器组件。

    19232

    SwiftUI 下定制手势

    SwiftUI 手势在某种程度上降低了使用门槛,但由于缺乏提供底层数据 API,严重制约了开发者深度定制能力。...在 SwiftUI 下,我们无法拥有类似构建全新 UIGestureRecongnizer 能力。所谓自定义手势,其实只是对系统预置手势重构而已。...手势在按压过程中,可以根据指定时间间隔进行类似 onChanged 回调。本例程着重演示如何通过视图修饰器包装手势方法以及 GestureState 使用。...TapGesture、LongPressGesture 均在满足触发条件后会自动终止手势,无法实现对任意时长支持 2.6 不足及改善方法 当前解决方案没有提供类似 LongPressGesture...在本例中,我们选择在 TapGesture onEnded 中回调用户闭包 总结 当前 SwiftUI 手势,暂处于使用门槛低但能力上限不足状况,仅使用 SwiftUI 原生手段无法实现非常复杂手势逻辑

    2.7K20

    Ask Apple 2022 与 SwiftUI 有关问答(上)

    是否有任何建议用来检测列表中行选择,类似于 “NavigationLink”,但不导航到另一个视图(例如,显示 Sheet 或从列表中选择一个选项 )?...A:看一下上下文菜单修饰器( contextMenu ) primaryAction 参数。该 API 也有一个 forSelectionType 参数,支持多选。...在 SwiftUI 4.0 中,contextMenu 功能获得了不小提高。例如一个上下文菜单中可以有多个选项、支持 primaryAction、以及可定制预览视图。...这也可以和 OpenWindowAction[16] 一起使用。请注意,你数据需要是可选,或者指定一个默认值,因为在某些情况下,框架自身也会创建窗口( 例如,当选择新窗口菜单项 )。...A:实现近似行为方法是在菜单使用命令来提供相同操作。通常情况下,应该有列表让人们知道有哪些键盘快捷键可用。但是,如果这不适合你使用情况,我们会对这方面的增强请求反馈感兴趣。

    12.3K20

    Ask Apple 2022 与 SwiftUI 有关问答(下)

    因此,如果你正在创建一个视图来显示可滚动内容,并可能进行选择操作,那么在 iOS 和 macOS 上使用 List 将有最好体验。...Table 中上下文菜单Q:如果我在 TABLE 上添加了一个上下文菜单,我如何确定哪一行导致了菜单显示(无需选择该行)?...Swiftcord[12] 代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 中显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。...对于类似的情况,也可以不使用显式动画驱动( 不使用 withAnimation ),只需将 .animation(.default, value: isPresented) 移动到 VStack 之外即可...Too complex to type checkQ:我在 iOS 14 SwiftUI 中遇到一个问题,我试图有条件地显示 3 个符合 Shape 协议对象中一个。

    14.8K30

    史上最强APP菜单栏设计解析!

    01显示最重要栏目 Tab bar应该只包含最有用目标页面入口,添加无用入口会让Tab bar变得混乱。要记住,Tab bar入口一定是用户使用最高频。...特别做法:Pinterest隐藏文字 Pinterest做法非常特别,在用户刚开始使用应用时候,会显示文本+icon方式,随着时间推移用户习惯了之后,Pinterest会隐藏标签。...05 避免隐藏菜单栏 避免自动隐藏菜单栏,因为它包含了最重要内容,如果隐藏后会增加用户使用难度。所以,确保始终显示菜单栏,几乎所有的应用都应该遵循这一准则。当然,也有一些特别的应用例外。...06 按约定顺序排列菜单 按顺序排列菜单内容是必要,因为每个应用程序都是为了更好清晰度和可用性而这样做,用户喜欢看到排列好东西,菜单栏就是其中之一。大型应用程序基本上遵循类似的设计规则。...Pinterest 过去常常首先显示主屏幕,搜索标签用于搜索内容,通知标签用于更新和配置文件用于其他东西。

    2K30

    用 Table 在 SwiftUI 下创建表格

    image-20220620142551830 上图是我们使用 List 创建一个有关 Locale 信息表格,每行都显示一个与 Locale 有关数据。...,SwiftUI 会扩展更多样式到 iPadOS 平台 行选择 在 Table 中启用行选择与 List 中方式十分类似: struct TableDemo: View { @State var...} } } table_drag_demo_2022-06-20_19.36.09.2022-06-20 19_37_28 交互 除了行选择和行拖拽外,Table 还支持对行设置上下文菜单...出现上述问题主要原因是,苹果没有采用其他 SwiftUI 控件常用编写方式( 原生 SwiftUI 容器或包装 UIKit 控件),开创性地使用了 result builder 为 Table 编写了自己...上下文菜单、选择 ) List( Grid 中 GridRow 并非真正意义上行 ) 需要视图可渲染( 保存成图片 ) LazyVGrid、Grid 可固定标题行 List、LazyVGrid、Grid

    4.1K30

    SwiftUI 4.0 全新导航系统

    基于类型响应式目标视图处理机制 比如下面的代码是在老版本( 4.0 之前 )SwiftUI使用编程式跳转一种方式: struct NavigationViewDemo: View { @...Detail 栏( 最右侧栏 ) doubleColumn 在三栏状态下隐藏 Sidebar ( 最左侧 )栏 all 显示所有的栏 automatic 根据当前上下文自动决定显示行为 上述选项并非适用于所有的平台...,例如,在 macOS 上,detalOnly 不会起作用 如果想在 SwiftUI 4.0 之前版本上使用类似的功能,可以参考我在 用 NavigationViewKit 增强 SwiftUI 导航视图...iPad 在 landscape 显示状态下,默认即为此种模式 automatic 默认值,根据上下文自动调整外观样式 在 NavigationTitle 中添加菜单 使用 navigationTitle...构造方法,可以将菜单嵌入到标题栏中。

    10.3K62

    一段因 @State 注入机制所产生“灵异代码”

    dump(_n) }}Sheet 视图上下文SwiftUI 创建并显示一个 Sheet 视图时,并非在现有的视图树上创建分支,而是新建一棵独立视图树。...也就是说 Sheet 中视图与原有视图分别处于不同上下文中。在 SwiftUI 早期版本中,对于分别位于不同上下文独立视图树,开发者需要显式为 Sheet 视图树注入环境依赖。...这意味着,相较于在原有视图树上创建分支,在新上下文中重建视图树开销更大,需要进行工作也更多。而 SwiftUI 为了优化效率,通常会对若干操作进行合并。...方案二、使用 @StateObject 强制刷新我们可以通过创建引用类型 Source 来避免在不同上下文之间关联 State 可能出现顺序错误。...在面对这些“灵异现象”时,如果我们能对其进行更多研究,那么不仅可以在今后避免类似的问题,而且在分析过程中,也能对 SwiftUI 各种运行机制有深入掌握。希望本文能够对你有所帮助。

    1.9K20

    如何在Xcode下预览含有Core Data元素SwiftUI视图

    结合两年来我在SwiftUI使用Core Data经验和教训,我们将在本文中探讨: •导致SwiftUI预览崩溃部分原因•如何在之后开发中避免类似的崩溃出现•如何在Xcode中安全可靠地预览含有...Redux-like SwiftUI + Combine是苹果推出声明+响应式结构方案。SwiftUI应用程序开发逻辑非常类似于Redux设计模式。...由于前文中提到SwiftUI App life cycle独特性,你无法在根视图中使用单例来注入持久化上下文。...由于预览也是模拟器,在它沙盒中同样可能出现类似的问题。可以使用上文中关于预览模拟器修复方法来尝试解决。...SwiftUI通常采用Redux开发模式,通过将获取到Core Data数据转换成标准Swift结构从而避免在视图中使用托管对象上下文或托管对象。

    5.1K10

    肘子 Swift 周报 | Swift,超越苹果生态!

    社区不仅为语言增添了更适合嵌入式开发 功能和示例[6],更有厂商推出了易于使用 一体化开发套件[7]。...需要用开放心态和全新视角去学习和使用这些新工具。将采用新框架过程视为将项目向更安全、更现代化方向重构绝佳机会。...在实际开发中,Edvinas Byla 意识到 LazyVGrid 性能并不理想,且不能满足他对上下文菜单行为特定需求,因此他决定采用 NSTableView 作为替代方案。...通过对 NSTableView 和 NSTableCellView 精心定制,他不仅显著优化了滚动体验,还解决了上下文菜单相关问题。...实际上,该应用复杂模板编辑器几乎完全使用 SwiftUI 开发,且表现出色。这一点彰显了 SwiftUI 在实际应用中强大潜力和灵活性。

    14610

    WWDC 23 ,SwiftUI 5 和 SwiftData 初印象

    ,直接定位到滚动视图特定位置,只能使用一次 )、全新滚动条控制( 闪烁 )、可自定义行视图在滚动区域顶端和显示区域显示状态( 例如可用其实现类似 watchOS 中滚动到顶端子视图缩小视觉效果...在不考虑兼容旧版本情况下,我认为 SwiftUI 5.0 升级可以打 95 分(满分 100 分),不过考虑到很多开发者在相当一段时间内还无法使用这些新功能,心情就会异常低落。...这是我目前整理一些有关 SwiftData 问题和注意事项( 原文发表在推文中,没有进行更系统归纳): 尚不支持公共和共享数据云同步 在当前版本中,通过其他上下文(ModelContext)创建数据并不会自动合并到视图上下文中...性质与通过宏创建 Observed 状态类似,可直接驱动视图更新(传递时无需使用属性包装器) Attribute 派生选项被废弃了 可以在 Xcode 中使用 Model Editor 将 Model...对于绝大多数开发者来说,一旦能够在应用中使用这些新功能,苹果或许又会带来更多新诱惑。SwiftUI 新特性极大拓展了其表达能力,但同时也增加了其学习曲线,特别是对初学者而言。

    38410

    WWDC 23 ,SwiftUI 5 和 SwiftData 初印象

    ,直接定位到滚动视图特定位置,只能使用一次 )、全新滚动条控制( 闪烁 )、可自定义行视图在滚动区域顶端和显示区域显示状态( 例如可用其实现类似 watchOS 中滚动到顶端子视图缩小视觉效果...在不考虑兼容旧版本情况下,我认为 SwiftUI 5.0 升级可以打 95 分(满分 100 分),不过考虑到很多开发者在相当一段时间内还无法使用这些新功能,心情就会异常低落。...这是我目前整理一些有关 SwiftData 问题和注意事项( 原文发表在推文中,没有进行更系统归纳): 尚不支持公共和共享数据云同步 在当前版本中,通过其他上下文(ModelContext)创建数据并不会自动合并到视图上下文中...性质与通过宏创建 Observed 状态类似,可直接驱动视图更新(传递时无需使用属性包装器) Attribute 派生选项被废弃了 可以在 Xcode 中使用 Model Editor 将 Model...对于绝大多数开发者来说,一旦能够在应用中使用这些新功能,苹果或许又会带来更多新诱惑。SwiftUI 新特性极大拓展了其表达能力,但同时也增加了其学习曲线,特别是对初学者而言。

    1.1K20

    AnyView 对 SwiftUI 性能影响

    我们将使用动画卡顿仪器配置文件以及这个开源 FPS 计数器。动画卡顿苹果建议使用动画卡顿作为衡量应用性能指标。卡顿基本上是指在屏幕上显示帧比预期晚帧。...这是有道理,因为 SwiftUI 不知道它已经显示过此视图一次(因为它隐藏在 AnyView 下)。因此,它会再次绘制它,同时还可能缓存(但不使用)该视图旧版本。...通过使用 AnyView,效果类似于将 id 修饰符值设置为 UUID() - 这将在发生更改时始终更新视图项目。...例如,如果你有一个菜单,作为几个异构元素列表,在点击时显示不同导航目标,并且决定将这些视图包装为 AnyView,我测量结果表明与使用其他方法相比,性能没有区别。...在这篇文章中,使用 AnyView 与使用 if-else 语句不同类型测试显示出没有显着差异。

    14200

    SwiftUI 与 Core Data —— 数据获取

    本文中我们将探讨在 SwiftUI 视图中批量获取 Core Data 数据方式,并尝试创建一个可以使用 mock 数据 FetchRequest。...由于最终我们需要在视图中使用 AnyConvertibleValueObservableObject( 托管对象 ),因此数据获取过程必须是在主线程上下文中进行( 数据绑定上下文是 ViewContext...FetchRequest 获取 )由于 TCA Reducer 无法与视图存续期自动绑定,上面的可感知延迟在每次触发 onAppear 时都将出现最终,我决定放下心结,仍然采用在视图中使用类似...MockableFetchRequest 使用方法MockableFetchRequest 提供与 FetchRequest 类似的动态获取数据能力,但它有如下特点:MockableFetchRequest...数据( 因为 WrappedID 存在,我们可以很容易创建 mock 数据 )无论上述哪种方式,开发者都需放弃使用 SwiftUI 原生 Section 功能,在惰性容器中,根据提供附加数据自行对数据做分段显示处理

    4.6K30

    我庆幸果断放弃了SwiftUI:它还不够成熟

    新框架使用声明性范例,让开发者用更少代码编写相同 UI。 SwiftUI 愿景是降低开发 iOS 门槛,吸引更多开发者、丰富 iOS 业态。...这是个宝贵机会,能让我认真体验一把 SwiftUI 并探索其内部工作原理。 起初项目工作良好,我对 SwiftUI 表现可以说非常满意,我甚至创建了自己修改器,以便更轻松地显示警报消息。...利用这款工具,我可以用多个 sprite 拼接成复杂资产,再最终为它们制作动画。它显示效果就是主窗口中一张表,出于学习目的,我当然还是想继续用 SwiftUI 喽。...我需要为每个上下文创建一个视图,这些视图同时又是其他视图「子视图」,然后把需要数据传递给特定视图。...我刚开始以为是因为地图编辑器 SpriteKit 主视图仍在后台渲染。所以我尝试在工作表显示出来后禁用渲染,但结果没有任何改变。 变更从一种环境传播至另一环境时,我也遇到了类似的延迟问题。

    5K20
    领券