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

问题描述 投票：0回答：9

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

我目前正在做的工作将要求我利用检测四个主要方向的滑动（

UP
、
DOWN
、
LEFT
和
RIGHT
）

问题是我不知道如何检测这一点。我环顾四周，发现自己走进了死胡同。

当用户在视图上滑动 

swiped up
时，我可以对下面的视图执行什么操作才能打印 
UP
？

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

谢谢。

swiftui swipe apple-watch
9个回答
66
投票

你可以使用

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
                        }
                    }))
54
投票

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

minimumDistance
之外没有硬编码值。

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

根据本杰明的回答，这是处理案件的一种更快捷的方式

.gesture(DragGesture(minimumDistance: 3.0, coordinateSpace: .local)
    .onEnded { value in
        print(value.translation)
        switch(value.translation.width, value.translation.height) {
            case (...0, -30...30):  print("left swipe")
            case (0..., -30...30):  print("right swipe")
            case (-100...100, ...0):  print("up swipe")
            case (-100...100, 0...):  print("down swipe")
            default:  print("no clue")
        }
    }
)
32
投票

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

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

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")
    }
7
投票

创建扩展：

extension View {
    func swipe(
        up: @escaping (() -> Void) = {},
        down: @escaping (() -> Void) = {},
        left: @escaping (() -> Void) = {},
        right: @escaping (() -> Void) = {}
    ) -> some View {
        return self.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() }
            }))
    }
}

然后：

            Image() // or any View
                .swipe(
                    up: {
                        // action for up
                    },
                    right: {
                        // action for right
                    })

注意每个方向都是可选参数

4
投票

为了简单起见，我会创建一个修改器。用法如下：

yourView
        .onSwiped(.down) {
            // Action for down swipe
        }

或

yourView
        .onSwiped { direction in 
            // React to detected swipe direction
        }

您还可以使用 

trigger
参数来配置接收更新：连续或仅在手势结束时。

完整代码如下：

struct SwipeModifier: ViewModifier {
    enum Directions: Int {
        case up, down, left, right
    }

    enum Trigger {
        case onChanged, onEnded
    }

    var trigger: Trigger
    var handler: ((Directions) -> Void)?

    func body(content: Content) -> some View {
        content.gesture(
            DragGesture(
                minimumDistance: 24,
                coordinateSpace: .local
            )
            .onChanged {
                if trigger == .onChanged {
                    handle($0)
                }
            }.onEnded {
                if trigger == .onEnded {
                    handle($0)
                }
            }
        )
    }

    private func handle(_ value: _ChangedGesture<DragGesture>.Value) {
        let hDelta = value.translation.width
        let vDelta = value.translation.height

        if abs(hDelta) > abs(vDelta) {
            handler?(hDelta < 0 ? .left : .right)
        } else {
            handler?(vDelta < 0 ? .up : .down)
        }
    }
}

extension View {
    func onSwiped(
        trigger: SwipeModifier.Trigger = .onChanged,
        action: @escaping (SwipeModifier.Directions) -> Void
    ) -> some View {
        let swipeModifier = SwipeModifier(trigger: trigger) {
            action($0)
        }
        return self.modifier(swipeModifier)
    }
    func onSwiped(
        _ direction: SwipeModifier.Directions,
        trigger: SwipeModifier.Trigger = .onChanged,
        action: @escaping () -> Void
    ) -> some View {
        let swipeModifier = SwipeModifier(trigger: trigger) {
            if direction == $0 {
                action()
            }
        }
        return self.modifier(swipeModifier)
    }
}
2
投票

有点晚了，但这里有另一个实现，它使用 OptionSet 使其使用更像各种其他 SwiftUI 组件 -

struct Swipe: OptionSet, Equatable {
    
    init(rawValue: Int) {
        self.rawValue = rawValue
    }
    
    let rawValue: Int
    
    fileprivate var swiped: ((DragGesture.Value, Double) -> Bool) = { _, _ in false } // prevents a crash if someone creates a swipe directly using the init
    
    private static let sensitivityFactor: Double = 400 // a fairly arbitrary figure which gives a reasonable response
    
    static var left: Swipe {
        var swipe = Swipe(rawValue: 1 << 0)
        swipe.swiped = { value, sensitivity in
            value.translation.width < 0 && value.predictedEndTranslation.width < sensitivity * sensitivityFactor
        }
        return swipe
    }

    static var right: Swipe {
        var swipe = Swipe(rawValue: 1 << 1)
        swipe.swiped = { value, sensitivity in
            value.translation.width > 0 && value.predictedEndTranslation.width > sensitivity * sensitivityFactor
        }
        return swipe
    }

    static var up: Swipe {
        var swipe = Swipe(rawValue: 1 << 2)
        swipe.swiped = { value, sensitivity in
            value.translation.height < 0 && value.predictedEndTranslation.height < sensitivity * sensitivityFactor
        }
        return swipe
    }

    static var down: Swipe {
        var swipe = Swipe(rawValue: 1 << 3)
        swipe.swiped = { value, sensitivity in
            value.translation.height > 0 && value.predictedEndTranslation.height > sensitivity * sensitivityFactor
        }
        return swipe
    }
    
    static var all: Swipe {
        [.left, .right, .up, .down]
    }
    
    private static var allCases: [Swipe] = [.left, .right, .up, .down]
    
    fileprivate var array: [Swipe] {
        Swipe.allCases.filter { self.contains($0) }
    }
}

extension View {
    
    func swipe(_ swipe: Swipe, sensitivity: Double = 1, action: @escaping (Swipe) -> ()) -> some View {
        
        return gesture(DragGesture(minimumDistance: 30, coordinateSpace: .local)
            .onEnded { value in
                swipe.array.forEach { swipe in
                    if swipe.swiped(value, sensitivity) {
                        action(swipe)
                    }
                }
            }
        )
    }
}

在 SwiftUI 视图中 -

HStack {
    // content
}
.swipe([.left, .right]) { swipe in // could also be swipe(.left) or swipe(.all), etc
    doSomething(with: swipe)
}

显然，检测滑动的逻辑有点基础，但这很容易根据您的要求进行定制。

2
投票

这反应更快：

.gesture(
    DragGesture()
        .onEnded { value in
            
            let pi = Double.pi
            
            let direction = atan2(value.translation.width, value.translation.height)
            
            switch direction {
            case (-pi/4..<pi/4): print("down swipe")
            case (pi/4..<pi*3/4): print("right swipe")
            case (pi*3/4...pi), (-pi..<(-pi*3/4)):
                print("up swipe")
            case (-pi*3/4..<(-pi/4)): print("left swipe")
            default:
                print("no clue")
            }
        }

说明：

  • 拖动手势返回变化向量为 
    value.translation
  • 此方法然后使用 
    atan2
     来查找该向量的方向，如下所示

根据

value.translation
的返回方式，
atan2
的值如下：

  • π
    将匹配理想的“向上”手势
  • -π/2
    是理想的“左”手势
  • 0.0
    将匹配理想的“向下”手势
  • π/2
    是理想的“右”手势

所以现在我们想将圆分成 4 个四分之一，每个四分之一包括上面中间的每个值。例如 

(-π/4...π/4)
将包括任何可被视为“向下”方向近似值的值。

0
投票
import SwiftUI

struct SwipeModifier: ViewModifier {

let rightToLeftAction: () -> ()
let leftToRightAction: () -> ()

func body(content: Content) -> some View {
    content
        .gesture(DragGesture(minimumDistance: 20, coordinateSpace: .global)
            .onEnded { value in
                let horizontalAmount = value.translation.width
                let verticalAmount = value.translation.height
                
                guard abs(horizontalAmount) > abs(verticalAmount) else {
                    return
                }
                
                withAnimation {
                    horizontalAmount < 0 ? rightToLeftAction() :  leftToRightAction()
                }
            })
    }
}

extension View {
  func swipe(rightToLeftAction: @escaping () -> (), leftToRightAction: @escaping () -> ()) -> some View {
     modifier(SwipeModifier(rightToLeftAction: rightToLeftAction, leftToRightAction: leftToRightAction))
   }
}

Fynn Becker 答案的改进版本。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.