Touchscreen event

Click and Touch Events in ArkUI

Click Events

Click events are fundamental interactions in any user interface, triggered by a complete press and release action using a finger or stylus. These events are essential for user interactions, such as button presses or link clicks. In ArkUI, click events are handled using the onClick callback function, which provides detailed information about the event.

Example: Controlling Image Visibility with a Button Click

@Entry
@Component
struct IfElseTransition {
  @State flag: boolean = true;
  @State btnMsg: string = 'show';

  build() {
    Column() {
      Button(this.btnMsg).width(80).height(30).margin(30)
        .onClick(() => {
          if (this.flag) {
            this.btnMsg = 'hide';
          } else {
            this.btnMsg = 'show';
          }
          // Toggle the visibility of the Image component
          this.flag = !this.flag;
        })
      if (this.flag) {
        Image($r('app.media.icon')).width(200).height(200)
      }
    }.height('100%').width('100%')
  }
}

Explanation

• Button Component: The button's onClick event toggles the visibility of an image.
• State Variables: flag controls the visibility of the image, and btnMsg updates the button's text to reflect the current state.
• Image Component: The image is conditionally rendered based on the flag state.

Detailed Breakdown

• State Management: The @State decorator is used to manage the state of the component. In this case, flag and btnMsg are used to control the visibility of the image and the text of the button, respectively.
• Conditional Rendering: The if (this.flag) statement conditionally renders the Image component based on the value of flag.
• Event Handling: The onClick method is used to handle the click event. When the button is clicked, the flag state is toggled, and the button text is updated accordingly.

Touch Events

Touch events are more granular interactions that occur when a finger or stylus interacts with a component. These events include Down, Move, Up, and Cancel, providing detailed information about the touch interaction.

Example: Handling Touch Events

@Entry
@Component
struct TouchExample {
  @State text: string = '';
  @State eventType: string = '';

  build() {
    Column() {
      Button('Touch').height(40).width(100)
        .onTouch((event?: TouchEvent) => {
          if (event) {
            switch (event.type) {
              case TouchType.Down:
                this.eventType = 'Down';
                break;
              case TouchType.Up:
                this.eventType = 'Up';
                break;
              case TouchType.Move:
                this.eventType = 'Move';
                break;
              case TouchType.Cancel:
                this.eventType = 'Cancel';
                break;
            }
            this.text = `TouchType: ${this.eventType}\nDistance between touch point and touch element:\nx: ${event.touches[0].x}\ny: ${event.touches[0].y}\nComponent globalPos: (${event.target.area.globalPosition.x}, ${event.target.area.globalPosition.y})\nwidth: ${event.target.area.width}\nheight: ${event.target.area.height}`;
          }
        })
      Button('Touch').height(50).width(200).margin(20)
        .onTouch((event?: TouchEvent) => {
          if (event) {
            switch (event.type) {
              case TouchType.Down:
                this.eventType = 'Down';
                break;
              case TouchType.Up:
                this.eventType = 'Up';
                break;
              case TouchType.Move:
                this.eventType = 'Move';
                break;
              case TouchType.Cancel:
                this.eventType = 'Cancel';
                break;
            }
            this.text = `TouchType: ${this.eventType}\nDistance between touch point and touch element:\nx: ${event.touches[0].x}\ny: ${event.touches[0].y}\nComponent globalPos: (${event.target.area.globalPosition.x}, ${event.target.area.globalPosition.y})\nwidth: ${event.target.area.width}\nheight: ${event.target.area.height}`;
          }
        })
      Text(this.text)
    }.width('100%').padding(30)
  }
}

Explanation

• Touch Event Handling: The onTouch method is used to handle touch events. It provides detailed information about the touch interaction, including the type of touch event and the coordinates of the touch.
• State Variables: text and eventType are used to store and display information about the touch event.
• Conditional Logic: The switch statement is used to handle different types of touch events (Down, Up, Move, Cancel).

Detailed Breakdown

• Event Types: The TouchEvent object provides the type property, which indicates the type of touch event (Down, Up, Move, Cancel).
• Touch Coordinates: The touches array provides the coordinates of the touch event relative to the component. event.touches[0].x and event.touches[0].y give the x and y coordinates of the touch point.
• Component Position: The event.target.area.globalPosition object provides the global position of the component, while event.target.area.width and event.target.area.height provide the width and height of the component.

Practical Use Cases

• Interactive UI Elements: Use touch events to create interactive UI elements, such as draggable components or resizable windows.
• Gesture Recognition: Combine touch events to recognize complex gestures, such as swipes, pinches, and rotations.
• Game Development: Implement touch controls for games, such as touch-based movement or interaction with game objects.