harmony 鸿蒙SwipeGesture

2022-08-09
浏览 (720)

SwipeGesture

<SwipeGesture> is used to implement a swipe gesture, which can be recognized when the swipe speed is 100 vp/s or higher.

NOTE

This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

APIs

SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })

Parameters

Name	Type	Mandatory	Description
fingers	number	No	Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10. Default value: 1
direction	swipeDirection	No	Swipe direction. Default value: SwipeDirection.All
speed	number	No	Minimum speed of the swipe gesture, in vp/s. Default value: 100 NOTE If the value is less than or equal to 0, it will be converted to the default value.

SwipeDirection

Name	Description
All	All directions.
Horizontal	Horizontal direction. The gesture event is triggered when the angle between the finger moving direction and the x-axis is less than 45 degrees.
Vertical	Vertical direction. The gesture event is triggered when the angle between the finger moving direction and the y-axis is less than 45 degrees.
None	Swiping disabled.

Events

Name	Description
onAction(event:(event?: GestureEvent) => void)	Triggered when a swipe gesture is recognized.

Example

// xxx.ets
@Entry
@Component
struct SwipeGestureExample {
  @State rotateAngle: number = 0
  @State speed: number = 1

  build() {
    Column() {
      Column() {
        Text("SwipeGesture speed\n" + this.speed)
        Text("SwipeGesture angle\n" + this.rotateAngle)
      }
      .border({ width: 3 })
      .width(300)
      .height(200)
      .margin(100)
      .rotate({ angle: this.rotateAngle })
      // The gesture event is triggered by swiping vertically with one finger.
      .gesture(
      SwipeGesture({ direction: SwipeDirection.Vertical })
        .onAction((event?: GestureEvent) => {
          if (event) {
            this.speed = event.speed
            this.rotateAngle = event.angle
          }
        })
      )
    }.width('100%')
  }
}