HarmonyOS/OpenHarmony (Stage モデル) アプリケーション開発シングルジェスチャー (1)

1.タップジェスチャー

TapGesture (値?:{ カウント? :番号;指? :番号})

クリックジェスチャはシングルクリックとマルチクリックをサポートしており、次の 2 つのオプションパラメータがあります。

count: このクリックジェスチャによって認識される連続クリックの数を宣言する必須ではないパラメーターです。デフォルト値は 1 です。1 未満の不正な値が設定された場合は、デフォルト値に変換されます。複数のクリックが設定されている場合、最後に持ち上げてから次に押すまでのタイムアウトは 300 ミリ秒です。

Fingers: クリックをトリガーする指の数を宣言するために使用される必須ではないパラメータです。最小値は 1、最大値は 10、デフォルト値は 1 です。複数の指が構成されている場合、最初の指を押してから 300 ミリ秒以内に押すのに十分な指がない場合、ジェスチャ認識は失敗します。実際の指のクリック数が設定値を超えると、ジェスチャ認識は失敗します。

例として、Text コンポーネントにダブルクリックジェスチャ (カウント値 2 のクリックジェスチャ) をバインドします。

// xxx.ets
@Entry
@Component
struct Index {
  @State value: string = "";
  
  build() {
    Column() {
      Text('Click twice').fontSize(28)
        .gesture(
          // 绑定count为2的TapGesture
          TapGesture({ count: 2 })
            .onAction((event: GestureEvent) => {
              this.value = JSON.stringify(event.fingerList[0]);
            }))
      Text(this.value)
    }
    .height(200)
    .width(250)
    .padding(20)
    .border({ width: 3 })
    .margin(30)
  }
}

2.長押しジェスチャー（LongPressGesture）

LongPressGesture (値?:{ 指? :番号;繰り返し? :ブール値;期間? :番号})

長押しジェスチャは、長押しジェスチャイベントをトリガーするために使用されます。長押しジェスチャをトリガーする最小の指の数は 1 で、最短の長押しイベントは 500 ミリ秒です。これには 3 つのオプションパラメータがあります。

Fingers: オプションのパラメータ。長押しジェスチャをトリガーするために必要な指の最小数を宣言するために使用されます。最小値は 1、最大値は 10、デフォルト値は 1 です。

repeat: イベントコールバックを継続的にトリガーするかどうかを宣言するために使用されるオプションのパラメーター。デフォルト値は false です。

duration: オプションのパラメータ。長押しをトリガーするのに必要な最小時間をミリ秒単位で宣言するために使用されます。デフォルト値は 500 です。

例として、Text コンポーネントで繰り返しトリガーできる長押しジェスチャをバインドする例を示します。

// xxx.ets
@Entry
@Component
struct Index {
  @State count: number = 0;

  build() {
    Column() {
      Text('LongPress OnAction:' + this.count).fontSize(28)
        .gesture(
          // 绑定可以重复触发的LongPressGesture
          LongPressGesture({ repeat: true })
            .onAction((event: GestureEvent) => {
              if (event.repeat) {
                this.count++;
              }
            })
            .onActionEnd(() => {
              this.count = 0;
            })
        )
    }
    .height(200)
    .width(250)
    .padding(20)
    .border({ width: 3 })
    .margin(30)
  }
}