如何使用 ArkUI 的触摸事件进行交互？

Question

探讨 ArkUI 中的触摸事件处理，构建富有互动性的 UI。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

ArkUI 提供了丰富的触摸事件，如 onTouch, onClick, 和 onSwipe，可以轻松实现用户交互。

实现点击和滑动交互的示例：

@Entry
@Component
struct TouchInteractionExample {
  @State boxColor: string = '#007DFF';

  build() {
    Column() {
      Box()
        .width(150)
        .height(150)
        .backgroundColor(this.boxColor)
        .onTouch((event) => {
          if (event.type === TouchType.Start) {
            this.boxColor = '#FF0000'; // 触摸时变红
          }
        })
        .onSwipe(() => {
          this.boxColor = '#007DFF'; // 滑动时恢复原色
        });

      Text('Swipe or Tap the Box')
        .fontSize(16)
        .margin(10);
    }.padding(20);
  }
}