SwiftUI

探索 SwiftUI 基本手势

2021-05-28  本文已影响0人  Swift社区

前言

在 SwiftUI 中，我们可以通过添加不同的交互来使我们的应用程序更具交互性，这些交互可以响应我们的点击，点击和滑动。

今天，我们将回顾 SwiftUI 基本手势：

TapGesture

轻击手势使我们能够识别 View 上的一个或多个轻击。
我们有几种方法可以添加点击手势。

第一个是直接使用 .onTapGesture 修饰符。

Circle()
  .onTapGesture {
    // Respond to Tap Gesture 
  }

SwiftUI 文档中使用的其他选项是通过创建手势并将其配置为属性，然后将其与 .gesture（_：include :) 修饰符一起使用。

注意： 为了执行某项操作或响应轻击，我们需要使用 .onEnded 操作关闭，该操作在手势结束时触发。

struct SingleTapGestureView: View {
  var singleTap: some Gesture {
      TapGesture()
          .onEnded { _ in
              // Respond to Tap Gesture
          }
  }

  var body: some View {
      Circle()
          .gesture(singleTap)
  }
}

实际上，我更喜欢第二种方法，因为这样我们可以创建不同的手势并通过我们的代码重复使用它们。

因此，如果我们将代码放在一起，就可以开始编写类似的东西。

giphy.gif 
struct TapGestureView: View {
    @State private var isAnimating = false
    @State private var tapped1x = 0

    var singleTap: some Gesture {
        TapGesture()
            .onEnded { _ in
                tapped1x += 1

                withAnimation(Animation.easeOut(duration: 0.5)) {
                    self.isAnimating = true
                }

                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                    self.isAnimating = false
                }
            }
    }

    var body: some View {
        VStack {
            Text("Tapped 1X: \(tapped1x) times")
                .font(.caption)

            Circle()
                .frame(width: 80, height: 80)
                .foregroundColor(.orange)
                .overlay(
                    Text("1X")
                        .fontWeight(.medium)
                )
                .background(
                    Circle()
                        .strokeBorder(Color.blue, lineWidth: 3)
                        .scaleEffect(isAnimating ? 1.5 : 1)
                        .opacity(isAnimating ? 0 : 1)
                )
                .gesture(singleTap)
        }
    }
}

类似地，我们只需使用 TapGesture(count：Int) 初始化程序就可以控制要响应的数量。

在这种情况下，您需要点击3次才能触发 .onEnded 操作关闭。

2.gif 
struct TapGesture3xView: View {
    @State private var isAnimating = false
    @State private var tapped3x = 0

    var multipleTap: some Gesture {
        TapGesture(count: 3)
            .onEnded { _ in
                tapped3x += 1

                withAnimation(Animation.easeOut(duration: 0.5)) {
                    self.isAnimating = true
                }

                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                    self.isAnimating = false
                }
            }
    }

    var body: some View {
        VStack {
            Text("Tapped 3X: \(tapped3x) times")
                .font(.caption)

            Circle()
                .frame(width: 80, height: 80)
                .foregroundColor(.orange)
                .overlay(
                    Text("3X")
                        .fontWeight(.medium)
                )
                .background(
                    Circle()
                        .strokeBorder(Color.blue, lineWidth: 3)
                        .scaleEffect(isAnimating ? 1.5 : 1)
                        .opacity(isAnimating ? 0 : 1)
                )
                .gesture(multipleTap)
        }
    }
}

长按手势

长按手势可让我们在用户长按定义的时间后以及在用户长按的时间内执行操作。

我们可以设置一个最小持续时间，以识别我们的长按手势。 可以在 LongPressGesture 初始化程序中进行设置。

LongPressGesture(minimumDuration: 2)

然后，我们可以使用 .updating 方法在长按期间执行操作，并使用 .onEnded 在识别到我们的手势时执行操作。

在此示例中，我将在长按操作期间更新 Circle() 的大小和颜色，并且当识别出手势时，我将显示“文本已完成”。

另外，我在这里使用的是 GestureState 属性包装器，该包装器在长按期间设置为 true ，在手势结束时设置为 false 。 我正在将此属性包装器用于示例动画。

3.gif 
struct LongPressGestureView: View {
    @GestureState private var isLongPressDetected = false
    @State private var isDone = false

    var longPress: some Gesture {
        LongPressGesture(minimumDuration: 2)
            .updating($isLongPressDetected) { currentState, gestureState, transaction in
                DispatchQueue.main.async {
                    isDone = false
                }
                gestureState = currentState
                transaction.animation = Animation.easeIn(duration: 2)
            }
            .onEnded { done in
                isDone = done
            }
    }

    var body: some View {
        VStack {
            Spacer()

            Circle()
                .frame(width: 10, height: 10)
                .foregroundColor(isLongPressDetected ? .orange : .primary)
                .scaleEffect(CGSize(
                                width: isLongPressDetected ? 10 : 1,
                                height: isLongPressDetected ? 10 : 1))

            Spacer()
            if isLongPressDetected {
                Text("Updating...")
            }

            if isDone {
                Text("Done")
            }

            Spacer()

            Text("Long Press 2 sec")
                .padding()
                .background(isLongPressDetected ? Color.green : Color.orange)
                .cornerRadius(16)
                .gesture(longPress)
        }
    }
}

拖动手势

拖动手势允许我们在拖动视图时执行操作。

我们可以利用并使用 .onChanged 和 .onEnded 关闭方法来执行某些操作。 这两种方法都为我们提供了出色的属性 DragGesture.Value，该属性存储以下拖动动作信息：

我们可以使用该属性来创建可移动视图。 在当前示例中，我使用 .onChanged 方法更新 Circle() 位置坐标。

4.gif 
struct DragGestureView: View {
    @State private var location: CGPoint = CGPoint(x: 100, y: 100)

    var drag: some Gesture {
        DragGesture(minimumDistance: 1, coordinateSpace: .local)
            .onChanged { value in
                location = value.location
            }
    }

    var body: some View {
        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(.orange)
            .position(location)
            .gesture(drag)
    }
}

在这里，添加了 .onEnded 方法，以在拖动结束后重置 Circle() 位置坐标。

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55a7965269b746aa8c0d40538c70f3fc~tplv-k3u1fbpfcp-zoom-1.image">

struct DragGestureView: View {
    @State private var location: CGPoint = CGPoint(x: 100, y: 100)

    var drag: some Gesture {
        DragGesture(minimumDistance: 1, coordinateSpace: .local)
            .onChanged { value in
                location = value.location
            }
            .onEnded { value in
                withAnimation(.easeOut) {
                    location = CGPoint(x: 100, y: 100)
                }
            }
    }

    var body: some View {
        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(.orange)
            .position(location)
            .gesture(drag)
    }
}

放大手势

当我们在View上应用放大动作时，放大手势允许做出一些动作。

在这里，还有 .onChanged 和 .onEnded 闭包，我们可以使用它们来在放大动作期间或结束时进行响应。 作为属性，接收到的是 CGFloat 的 MagnificationGesture.Value 。 我们可以以此为例来更改视图大小。

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/858b930cd72345efa695cffd55ce949a~tplv-k3u1fbpfcp-zoom-1.image">

struct MagnificationGestureView: View {
    @State var magnifiedValue: CGFloat = 1.0

    var magnification: some Gesture {
        MagnificationGesture()
            .onChanged { value in
                magnifiedValue = value
            }
            .onEnded { value in
                magnifiedValue = 1.0
            }
    }

    var body: some View {
        Circle()
            .frame(width: 100 * magnifiedValue, height: 100 * magnifiedValue)
            .foregroundColor(.orange)
            .gesture(magnification)
            .animation(.easeOut)
    }
}

旋转手势

旋转手势允许旋转视图，并在旋转过程中和旋转结束时以某些动作做出响应。

它还为我们提供了 .onChanged 和 .onEnded 闭包，这些闭包为我们提供了 RotationGesture.Value，它表示手势 Angle 值。 我们可以使用该值旋转视图。

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16b29b23bd084056a28e1c8ba611b3dc~tplv-k3u1fbpfcp-zoom-1.image">

struct RotationGestureView: View {
    @State private var angle = Angle(degrees: 0.0)
    @State private var backgroundAngle = Angle(degrees: 0.0)

    var rotation: some Gesture {
        RotationGesture()
            .onChanged { angle in
                self.angle = angle
            }
            .onEnded { angle in
                withAnimation(Animation.spring()) {
                    self.backgroundAngle = angle
                }
            }
    }

    var body: some View {
        Rectangle()
            .frame(width: 150, height: 150, alignment: .center)
            .foregroundColor(.orange)
            .rotationEffect(self.angle)
            .gesture(rotation)
            .background(
                Rectangle()
                    .shadow(color: .primary, radius: 10, x: 0.0, y: 0.01)
                    .foregroundColor(.secondary)
                    .rotationEffect(backgroundAngle)
            )
    }
}

总结

上面是对 SwiftUI 基本手势的总结。我们可以实现更多的交互使我们的 App 变得更生动。

对于高级的使用，可以将手势组合或者同时使用以做出响应，或者可以实现自己的自定义手势。

上一篇下一篇

猜你喜欢

热点阅读