(翻译) SwiftUI -- 手势的实现

1.gif

本文原创作者：Alexander Ershov
原文链接：https://medium.com/flawless-app-stories/implementing-gestures-in-swiftui-dbd05fff24c6

为了实现交互手势，SwiftUI拥有手势协议（Gesture protocol）。确切来说，它实现了5种手势协议。让我们一一探索它们！

让我们从简单的 tap 手势开始。它能够通过 TapGesture 实现。让我们来创建一个能通过点击手势改变自身颜色的简单圆角矩形，你通过下图可以看到此例子的效果。😉

2.gif

嗯，是时候让我们深入了解代码的实现了：

struct TapGestureExample: View {
   @State var rectangleColor = Color(.green)

   var body: some View {
       // TapGesture creation
       let tapGesture = TapGesture()
               // Change color when tap ended
               .onEnded { _ in
                   if self.rectangleColor == .red {
                       self.rectangleColor = .green
                   } else {
                       self.rectangleColor = .red
                   }
               }
       return Rectangle()
               // Change color
               .foregroundColor(rectangleColor)
               .cornerRadius(40)
               .frame(width: 200, height: 100, alignment: .center)
               // Add the tapGesture to this view
               .gesture(tapGesture)
   }
}

完成简单点击事件之后，我们将要实现一个长按手势（long tap）。为了实现它我们将会使用 LongPressGesture。现在我们将会通过长按至少 2秒 以上来改变圆角矩形的颜色。让我们看看它是怎么实现的👇。

struct LongPressGestureExample: View {
    @State var rectangleColor = Color(.green)

    var body: some View {
        // LongPressGesture creation
        // Gesture will be handled only if if takes at least 2 seconds
        let longPressGesture = LongPressGesture(minimumDuration: 2, maximumDistance: 10)
                .onEnded { _ in
                    if self.rectangleColor == .red {
                        self.rectangleColor = .green
                    } else {
                        self.rectangleColor = .red
                    }
                }

        return Rectangle()
                // Change color
                .foregroundColor(rectangleColor)
                .cornerRadius(40)
                .frame(width: 200, height: 100, alignment: .center)
                // Add the longPressGesture to this view
                .gesture(longPressGesture)
    }
}

上面我们已经完成了长按手势，我们可以试着来拖动我们的矩形。拖拽手势（DragGesture）将会帮我们实现这样的效果！你可以在下面看到它实现的效果以及怎么使用代码来实现它。

3.gif

struct DragGestureExample: View {
    @State var rectangleOffset: CGSize = .zero

    var body: some View {
        // DragGesture creation
        let dragGesture = DragGesture()
                // When drag location is changed we recalculate offset for the rectangle
                .onChanged { value in
                    self.rectangleOffset = value.translation
                }
                // When gesture ended we return the rectangle to the initial position
                .onEnded { _ in
                    self.rectangleOffset = .zero
                }

        return Rectangle()
                .foregroundColor(.green)
                .cornerRadius(40)
                // Change position for the rectangle
                .offset(rectangleOffset)
                .frame(width: 200, height: 100, alignment: .center)
                // Add the dragGesture to this view
                .gesture(dragGesture)
    }
}

目前为止，我们仅仅学习了单点操作的手势，是时候来学习多点触碰的手势了。第一个是缩放手势，你在下面可以看到它具体实现的效果，为了实现这种效果，我们将会使用 MagnificationGesture。

4.gif

struct MagnificationGestureExample: View {
    @State var rectangleScaleEffect: CGFloat = CGFloat(1)

    var body: some View {
        // MagnificationGesture creation
        let magnificationGesture = MagnificationGesture()
                // Scale effect recalculation for the rectangle
                .onChanged { value in
                    self.rectangleScaleEffect = value
                }

        return Rectangle()
                .foregroundColor(.green)
                .cornerRadius(40)
                // Change scale effect
                .scaleEffect(rectangleScaleEffect)
                .frame(width: 200, height: 100, alignment: .center)
                // Add the magnificationGesture to this view
                .gesture(magnificationGesture)
    }
}

接下来最后一个就是旋转手势了，它使用 RotationGesture 来实现，现在让矩形旋转起来 🙃。

6.gif

struct RotationGestureExample: View {
    @State var rectangleRotationAngle: Angle = .zero

    var body: some View {
        // DragGesture creation
        let rotationGesture = RotationGesture()
                // Rotation angle recalculation for the rectangle
                .onChanged { value in
                    self.rectangleRotationAngle = value
                }

        return Rectangle()
                .foregroundColor(.green)
                .cornerRadius(40)
                // Rotate the rectangle
                .rotationEffect(rectangleRotationAngle)
                .frame(width: 200, height: 100, alignment: .center)
                // Add the rotationGesture to this view
                .gesture(rotationGesture)
    }
}

就这么多啦 😊，我们学习了所有SwiftUI默认的手势，如果你想更深入地探索它们，可以去阅读 官方文档。