热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

SwiftUI在iPadOS和Catalyst上使用onTapGesture和鼠标/触控板出现意外行为

我在我的应用程序中有一个显示矩形卡片列表的布局-每个卡片都应该可以点击(一次)以显示一组操作按钮和更多信息等。我已经实现了这一点,.onTapGesture(

我在我的应用程序中有一个显示矩形卡片列表的布局 - 每个卡片都应该可以点击(一次)以显示一组操作按钮和更多信息等。

我已经实现了这一点,.onTapGesture()并且我还.contentShape(Rectangle()强制执行了可点击区域。然而,虽然我的实现适用于触摸屏界面,但当我将它与 iPadOS 鼠标支持一起使用时,以及在 Catalyst 上,我看到了一些非常意外的行为。

我在下面制作了一个最小的可重现示例,您可以复制该示例以重现问题。

使用鼠标/触控板输入时出现的问题:


  • 并非每次单击鼠标都记录为点击手势。除了少数情况外,这几乎是任意发生的:

  • 它似乎只在非常特定的区域单击,或者在同一位置多次单击时单击。

  • 看来,在很多情况下,只有每一个其他的点击记录。所以我双击只得到一个点击手势。

  • 在此示例代码中并不明显,但在我的主应用程序中,可点击区域似乎是任意的 - 您通常可以单击靠近文本或与其对齐以记录点击手势,但并非总是如此

如果您正在运行示例代码,您应该能够通过反复移动鼠标并尝试单击来查看问题。除非您在同一位置多次单击,否则它不起作用。

什么按预期工作


  • 所有输入都使用触摸而不是鼠标;无论您在哪里点击它都会记录点击手势。

  • 作为本机 Mac 目标运行时的鼠标输入。上述问题仅针对在 iPadOS 和 Mac Catalyst 下运行示例时的鼠标/触控板。

我用来重现这个问题的代码(每次记录点击手势时都有一个计数器来计数):

struct WidgetCompactTaskItemView: View { let title: String
let description: String var body: some View {
HStack {
Rectangle()
.fill(Color.purple)
.frame(maxWidth: 14, maxHeight: .infinity)
VStack(alignment: .leading) {
Text(title).font(.system(size: 14, weight: .bold, design: .rounded))
Text(description).font(.system(.footnote, design: .rounded))
.frame(maxHeight: .infinity)
.fixedSize(horizontal: false, vertical: true)
.lineLimit(1)
.padding(.vertical, 0.1)
Spacer()
}
.padding(.horizontal, 6)
.padding(.top, 12)
}
.frame(maxWidth: .infinity, maxHeight: 100, alignment: .leading)
.background(Color.black)
.cornerRadius(16)
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(Color.green, lineWidth: 0.5)
)
}
}
struct ContentView: View {
@State var tapCounter = 0
var body: some View {
VStack {
Text("Button tapped (tapCounter) times.")
WidgetCompactTaskItemView(title: "Example", description: "Description")
.contentShape(Rectangle())
.onTapGesture(count: 1) {
tapCounter += 1
}
Spacer()
}
}
}

我尝试了几件事,包括移动修饰符,eoFillcontentShape修饰符上设置为 true (这并没有解决问题,只是做了不同的意外行为)。

任何帮助找到按预期工作并始终如一地工作解决方案,无论是鼠标还是触摸都将不胜感激。我不确定我是否做错了什么或者这里是否有错误,所以请尝试使用代码自己重新创建这个示例,看看是否可以重现问题。

回答


所以我意识到有一个更好的解决方案可以绕过.onTapGesture鼠标输入对我来说的所有奇怪之处。而是将整个视图封装在一个中Button

我把它变成了一个类似于 onTapGesture 的修饰符,这样它就更实用了。


import Foundation
import SwiftUI
public struct UltraPlainButtonStyle: ButtonStyle {
public func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
}
}
struct Tappable: ViewModifier {
let action: () -> ()
func body(content: Content) -> some View {
Button(action: self.action) {
content
}
.buttonStyle(UltraPlainButtonStyle())
}
}
extension View {
func tappable(do action: @escaping () -> ()) -> some View {
self.modifier(Tappable(action: action))
}
}

经历这个:我首先有一个按钮样式,它只是按原样返回标签。这是必要的,因为默认值PlainButtonStyle()在单击时仍然具有可见效果。然后我创建一个修饰符,Button用这个按钮样式封装 a 中给定的内容,然后将其作为扩展添加到View.

使用示例

WidgetCompactTaskItemView(title: "Example", description: "Description")
.tappable {
tapCounter += 1
}

这解决了我在使用鼠标可点击区域时遇到的所有问题。






推荐阅读
author-avatar
ningxiao088_272
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有