如何在视图上使用 SwiftUI 检测向上、向下、向左和向右滑动答案

【问题标题】：How to detect Swiping UP, DOWN, LEFT and RIGHT with SwiftUI on a View如何在视图上使用 SwiftUI 检测向上、向下、向左和向右滑动
【发布时间】：2020-07-08 03:57:01
【问题描述】：

我正在着手构建 Apple Watch 应用程序。

我目前的工作将要求我利用检测四个主要方向的滑动（UP、DOWN、LEFT 和 RIGHT）

问题是我不知道如何检测到这一点。我一直在环顾四周，但我走到了死胡同。

当用户在视图上滑动 UP 时，我可以对下面的视图执行什么操作以仅打印 swiped up？

struct MyView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

谢谢。

【问题讨论】：

标签： swiftui swipe apple-watch

【解决方案1】：

你可以使用DragGesture

.gesture(DragGesture(minimumDistance: 0, coordinateSpace: .local)
                    .onEnded({ value in
                        if value.translation.width < 0 {
                            // left
                        }

                        if value.translation.width > 0 {
                            // right
                        }
                        if value.translation.height < 0 {
                            // up
                        }

                        if value.translation.height > 0 {
                            // down
                        }
                    }))

【讨论】：

我试试看！谢谢 :) 看来这正是我所需要的！
这看起来不错，但不能正常工作。除非你是机器人，否则几乎不可能不产生多个响应。

【解决方案2】：

如果您想要对滑动的方向性更“宽容”，您可以使用更多条件来帮助平衡：

编辑：做了更多的测试，显然第二个条件的值增加了一些混乱，所以我调整了它们以消除所说的混乱并使手势防弹（拖动到角落现在会出现“没有线索”而不是一种手势）...

let detectDirectionalDrags = DragGesture(minimumDistance: 3.0, coordinateSpace: .local)
.onEnded { value in
    print(value.translation)
    
    if value.translation.width < 0 && value.translation.height > -30 && value.translation.height < 30 {
        print("left swipe")
    }
    else if value.translation.width > 0 && value.translation.height > -30 && value.translation.height < 30 {
        print("right swipe")
    }
    else if value.translation.height < 0 && value.translation.width < 100 && value.translation.width > -100 {
        print("up swipe")
    }
    else if value.translation.height > 0 && value.translation.width < 100 && value.translation.width > -100 {
        print("down swipe")
    }
    else {
        print("no clue")
    }

【讨论】：

应该把这个变量放在哪里？
@soylentgraham 将其放在 var body: some View { 和 return 之间的结构中...默认情况下，swiftUI（如果您在本节中没有 return 语句）将返回第一个 swiftui 元素（第一个 ZStack/HStack/etc），但是如果你在你的第一个 swiftui 元素之前加上“return”，你可以添加变量，如果在 var body 一些视图之前添加通常会给你一个错误......
我很震惊，定义这样的行为需要看似非常明确的构造，而且构造容易出错。在横向和纵向方向上滑动是否“感觉不错”？这似乎是 API 中的一个大漏洞。
向左、向右、向上和向下滑动的最佳平移宽度/高度是多少，以及如何使其与所使用的设备尺寸（紧凑/常规）“相对”？此处固定为 30/100，但这与 Apple 用于其应用的相同吗？

【解决方案3】：

由于其他解决方案在物理设备上有点不一致，我决定提出另一种在不同屏幕尺寸上似乎更加一致的解决方案，因为除了 minimumDistance 之外没有硬编码值。

.gesture(DragGesture(minimumDistance: 20, coordinateSpace: .global)
            .onEnded { value in
                let horizontalAmount = value.translation.width as CGFloat
                let verticalAmount = value.translation.height as CGFloat
                
                if abs(horizontalAmount) > abs(verticalAmount) {
                    print(horizontalAmount < 0 ? "left swipe" : "right swipe")
                } else {
                    print(verticalAmount < 0 ? "up swipe" : "down swipe")
                }
            })

【讨论】：