鸿蒙开发之组合手势

最新推荐文章于 2024-02-27 09:51:17 发布

Lu_Ca

最新推荐文章于 2024-02-27 09:51:17 发布

阅读量412

点赞数 7

分类专栏：鸿蒙开发文章标签：鸿蒙

本文链接：https://blog.csdn.net/Lu_Ca/article/details/135607145

版权

鸿蒙开发专栏收录该内容

42 篇文章 6 订阅

订阅专栏

当我们需要支持多个手势的时候，可以通过GestureGroup来实现，如下实现了同时支持Tap和Pan手势

import Prompt from '@system.prompt'
@Entry
@Component
struct OfficialGestureGroupPage {
  @State message: string = 'Hello World'

  build() {
      Column() {
        Column() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .border({width:3})
            .backgroundColor(Color.Brown)

        }
        .width(300)
        .height(200)
        .margin(50)
        .padding(20)
        .gesture(
                    //并发的触发所有手势
          GestureGroup(GestureMode.Parallel,
            //添加拖拽手势
            PanGesture()
              .onActionStart(() => {
                Prompt.showToast({message:'gesture pan start'})
              })
              .onActionUpdate((event:GestureEvent) => {
                Prompt.showToast({message:'gesture pan update'})
              })
              .onActionEnd(() => {
                Prompt.showToast({message:'gesture pan end'})
              }),
            //添加点击手势
            TapGesture()
              .onAction(() => {
                Prompt.showToast({message:'gesture tap'})
              })
            )
        )
      }
      .width('100%')
      .height('100%')
  }
}

其中，GestureGroup的mode参数含义如下