harmony 鸿蒙SwipeGesture

  • 2022-08-09
  • 浏览 (699)

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) =&gt; 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%')
  }
}

en-us_image_0000001231374559.png

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkTS-based Declarative Development Paradigm

harmony 鸿蒙@ohos.multimedia.avCastPicker (AVCastPicker)

harmony 鸿蒙Property Animation

harmony 鸿蒙Enums

harmony 鸿蒙Blank

harmony 鸿蒙Button

harmony 鸿蒙CalendarPicker

harmony 鸿蒙Checkbox

harmony 鸿蒙CheckboxGroup

harmony 鸿蒙DataPanel

0  赞