当前位置：首页 > article >正文

鸿蒙next版开发：ArkTS组件通用属性（组件标识）

article 2024/11/14 19:55:53

在HarmonyOS 5.0中，ArkTS的组件标识（ID）是开发中常用的一种属性，它为应用内的每个组件提供了一个唯一的标识符。这使得开发者能够在代码中引用特定的组件，执行操作如获取组件属性、发送事件等。本文将详细解读ArkTS中组件标识的通用属性，并提供示例代码进行说明。

组件标识基础

组件标识（ID）是组件的唯一标识符，在整个应用内唯一。通过这个标识符，开发者可以获取指定ID组件的属性，也提供向指定ID组件发送事件的功能。

id属性

id属性用于为组件设置一个唯一的标识符。这个标识符可以是任何有效的字符串，但在整个应用中必须是唯一的。

参数说明：

value: 组件的唯一标识，由使用者保证其唯一性。
默认值：空字符串 ''。

key属性

key属性同样用于为组件设置唯一标识，但它主要用于应用的测试。与id属性同时使用时，后赋值的属性会覆盖先赋值的属性。

参数说明：

value: 组件的唯一标识，由使用者保证其唯一性。
默认值：空字符串 ''。

示例代码

以下是一个使用ArkTS组件标识属性的示例：

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

  build() {
    Flex({
      direction: FlexDirection.Column,
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center
    }) {
      Button() {
        Text('onKeyTab')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }.margin({
        top: 20
      })
      .backgroundColor('#0D9FFB')
      .onKeyEvent(() => {
        this.text = "onKeyTab";
      });

      Button() {
        Text('click to start')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }.margin({
        top: 20
      })
      .onClick(() => {
        console.info(getInspectorByKey("click"));
        console.info(JSON.stringify(getInspectorTree()));
        this.text = "Button 'click to start' is clicked";
        setTimeout(() => {
          sendEventByKey("longClick", 11, "");
        }, 2000);
      }).id('click');

      Button() {
        Text('longClick')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }.margin({
        top: 20
      })
      .backgroundColor('#0D9FFB')
      .gesture(
        LongPressGesture()
          .onActionEnd(() => {
            console.info('long clicked');
            this.text = "Button 'longClick' is longclicked";
            setTimeout(() => {
              let rect = Utils.getComponentRect('onTouch');
              let touchPoint: TouchObject = {
                id: 1,
                type: TouchType.Down,
                x: rect.left + (rect.right - rect.left) / 2,
                y: rect.top + (rect.bottom - rect.top) / 2,
                screenX: rect.left + (rect.right - rect.left) / 2,
                screenY: rect.left + (rect.right - rect.left) / 2,
                windowX: rect.left + (rect.right - rect.left) / 2,
                windowY: rect.left + (rect.right - rect.left) / 2,
                displayX: rect.left + (rect.right - rect.left) / 2,
                displayY: rect.left + (rect.right - rect.left) / 2,
              }
              sendTouchEvent(touchPoint);
              touchPoint.type = TouchType.Up;
              sendTouchEvent(touchPoint);
            }, 2000);
      })).id('longClick');
    }
    .width('100%')
    .height('100%');
  }
}

在这个示例中，我们创建了三个按钮组件，并为它们分别设置了id属性。通过这些id，我们可以在需要时获取这些按钮的属性或向它们发送事件。