web获取用户滑动的距离_如何在SwiftUI中获取用户的滑动方向

web获取用户滑动的距离

简单的用户界面 (Simple UI)

For the UI, let’s have a ZStack that contains a color and text that change when the swipe direction changes. The Color struct can behave as a view. Because of this, we can add Color.red inside our ZStack directly:

对于UI，让我们有一个ZStack ，其中包含在滑动方向更改时会更改的颜色和文本。 Color结构可以充当视图。 因此，我们可以在ZStack直接添加Color.red ：

struct ContentView: View {
var body: some View {
        ZStack {
          Color.red
        }
    }
}

Create two variables — one for the color and one for the text. Inside our ZStack, add our color variable and a Text view that takes in our direction string variable. Use .edgesIgnoringSafeArea(.all) to cover the full screen with our chosen color:

创建两个变量-一个用于颜色，一个用于文本。 在我们的ZStack内部，添加我们的color变量和一个接受我们方向字符串变量的Text视图。 使用.edgesIgnoringSafeArea(.all)用我们选择的颜色覆盖全屏：

struct ContentView: View {
  @State var color = Color.red.opacity(0.4)
  @State var direction = ""
  var body: some View {
        ZStack {
            color
            Text(direction)
                .font(.system(size: 30))
                .bold()
        }
        .edgesIgnoringSafeArea(.all)
   }
}

拖动手势 (DragGesture)

Create two more variables. The first variable is for saving the start position of the drag, while the second variable is a boolean used to detect the start of the swipe motion. Add a DragGesture to our ZStack. We are going to need both .onChanged and .onEnded:

再创建两个变量。 第一个变量用于保存拖动的开始位置，而第二个变量是用于检测滑动动作开始的布尔值。 将DragGesture添加到我们的ZStack 。 我们将需要.onChanged和.onEnded ：

struct ContentView: View {
  // Variables
   @State var startPos : CGPoint = .zero
   @State var isSwipping = true
  
  var body: some View {
     ZStack {
       //code
     }.gesture(DragGesture()
        .onChanged { gesture in
           // onChange code
        }
        .onEnded { gesture in
           // onEnded code
        }
     )
  }
}

Inside .onChanged, assign our startPos variable to the gesture location value. Now, our startPos will store the location of every drag gesture event detected on our ZStack:

在.onChanged内部，将我们的startPos变量分配给手势位置值。 现在，我们的startPos将存储在ZStack上检测到的每个拖动手势事件的位置：

.onChanged { gesture in
            if self.isSwipping {
                self.startPos = gesture.location
                self.isSwipping.toggle()
            }
        }

Inside .onEnded, calculate the absolute value of the difference between our startPos x-coordinate value and the end gesture x-coordinate value. Then, calculate the same value for the y-coordinates. Now, we need the following four conditions added:

在.onEnded内部，计算我们的startPos x坐标值和结束手势x坐标值之差的绝对值。 然后，为y坐标计算相同的值。 现在，我们需要添加以下四个条件：

• If the start position’s y-coordinate value is smaller than the end gesture’s y-coordinate value, and if the distance between the y-coordinates is larger than the distance between the x-coordinates, then the swipe direction is down.
  如果开始位置的y坐标值小于结束手势的y坐标值，并且如果y坐标之间的距离大于x坐标之间的距离，则滑动方向向下。
• If the start position’s y-coordinate value is bigger than the end gesture’s y-coordinate value, and if the distance between the y-coordinates is larger than the distance between the x-coordinates, then the swipe direction is up.
  如果开始位置的y坐标值大于结束手势的y坐标值，并且如果y坐标之间的距离大于x坐标之间的距离，则滑动方向朝上。
• If the start position’s x-coordinate value is bigger than the end gesture’s x-coordinate value, and if the distance between the x-coordinates is larger than the distance between the y-coordinates, then the swipe direction is left.
  如果开始位置的x坐标值大于结束手势的x坐标值，并且如果x坐标之间的距离大于y坐标之间的距离，则向左滑动。
• Lastly, if the start position’s x-coordinate value is smaller than the end gesture’s x-coordinate value, and if the distance between the x-coordinates is larger than the distance between the y-coordinates, then the swipe direction is right.
  最后，如果开始位置的x坐标值小于结束手势的x坐标值，并且如果x坐标之间的距离大于y坐标之间的距离，则滑动方向正确。

.onEnded { gesture in
            let xDist =  abs(gesture.location.x - self.startPos.x)
            let yDist =  abs(gesture.location.y - self.startPos.y)
            if self.startPos.y <  gesture.location.y && yDist > xDist {
                self.direction = "Down"
                self.color = Color.green.opacity(0.4)
            }
            else if self.startPos.y >  gesture.location.y && yDist > xDist {
                self.direction = "Up"
                self.color = Color.blue.opacity(0.4)
            }
            else if self.startPos.x > gesture.location.x && yDist < xDist {
                self.direction = "Left"
                self.color = Color.yellow.opacity(0.4)
            }
            else if self.startPos.x < gesture.location.x && yDist < xDist {
                self.direction = "Right"
                self.color = Color.purple.opacity(0.4)
            }
            self.isSwipping.toggle()
            }

Swipe direction in SwiftUI

在SwiftUI中滑动方向

All done! Thank you for reading.

全做完了！ 感谢您的阅读。

翻译自: https://medium.com/better-programming/how-to-get-users-swipe-direction-in-swiftui-b482a6a8771b

web获取用户滑动的距离