How to Solve the Issue of XComponent Failing to Trigger Touch Events

Read the original article：How to Solve the Issue of XComponent Failing to Trigger Touch Events

How to Solve the Issue of XComponent Failing to Trigger Touch Events

Problem Description

The onTouch method is bound to the XComponent, but the log information in this method is not output, indicating that the onTouch event is not properly triggered.
Reference for the problem is as follows:

Column() {
  XComponent({
    id: 'xcomponentId-00',
    type: "12314",
    libraryname: 'nativerender'
  })
    .onTouch((event: TouchEvent) => {
      console.info(`onTouch ${event.type}`)
    })
}
.height(CommonConstants.XCOMPONENT_HEIGHT)
.width('100%')

Background Knowledge

The XComponent interface provides a Surface for graphics rendering and media data writing. XComponent is responsible for embedding it into the view and supports customizing the position and size of the Surface. When the XComponentType parameter is set to SURFACE or TEXTURE, common events such as onTouch are supported.

Solution

1. When the problem code uses the XComponent (value: {id: string, type: XComponentType, libraryname?: string, controller?: XComponentController}) interface, and if the libraryname parameter is configured, common events such as click events, touch events, and key events will only respond to the event interfaces on the C-API side. As a result, the onTouch event in the problem code cannot be triggered.
2. To ensure that the onTouch event responds properly, it is recommended to use the XComponent(options: XComponentOptions) interface without the libraryname parameter for configuration.

@Entry
@Component
struct TouchEventDemo {
  xComponentController: XComponentController = new XComponentController();
  private aiController: ImageAnalyzerController = new ImageAnalyzerController();
  private options: ImageAIOptions = {
    types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT],
    aiController: this.aiController
  };

  build() {
    RelativeContainer() {
      Column() {
        XComponent({
          type: XComponentType.SURFACE,
          controller: this.xComponentController,
          imageAIOptions: this.options
        })
          .onTouch((event: TouchEvent) => {
            console.info(`onTouch ${event.type}`);
          })
      }
      .height('100%')
      .width('100%')
    }
  }
}

Written by Mehmet Emir Ucar