HarmonyOS 鸿蒙Next 自定义组件如何写自定义事件

自定义组件HSCell 中自定义事件tapEvent，通过点击修改数据，实现UI状态的变化

[@Observed](/user/Observed)

class HSItemData {

  choose: boolean = false

  constructor(choose: boolean) {

    this.choose = choose

  }

}

[@Observed](/user/Observed)

class HSTestDataModel {

  itemArray: Array<HSItemData> = new Array()

  constructor(itemArray: HSItemData[]) {

    this.itemArray = itemArray

  }

}

[@Component](/user/Component)

struct HSCell {

  [@ObjectLink](/user/ObjectLink) itemData: HSItemData

  tapEvent?: (item: HSItemData) => void

  build() {

    Row() {

      if (this.itemData.choose) {

        Text("选中")

      }

      else {

        Text("未选中")

      }

    }

    .backgroundColor(Color.Pink)

    .onClick(() => {

      if (this.tapEvent) {

        this.tapEvent(this.itemData)

      }

    })

    .margin({ bottom: 10 })

    .width('100%')

    .height(68)

  }

}

[@Entry](/user/Entry)

[@Component](/user/Component)

export struct HSTestPage {

  listeners: DataChangeListener[] = []

  [@State](/user/State) dataModel: HSTestDataModel = new HSTestDataModel([])

  aboutToAppear(): void {

    for (let i = 0; i < 10; i++) {

      this.dataModel.itemArray.push(new HSItemData(false))

    }

  }

  build() {

    Column() {

      List() {

        LazyForEach(this, (item: HSItemData, index) => {

          HSCell({

            itemData: item, tapEvent: () => {

              item.choose = !item.choose

            }

          })

        }, (item: string) => item.toString())

      }

    }

    .height('100%')

  }

  totalCount() {

    return this.dataModel.itemArray.length

  }

  getData(index: number) {

    return this.dataModel.itemArray[index]

  }

  registerDataChangeListener(listener: DataChangeListener) {

    if (this.listeners.indexOf(listener) < 0) {

      this.listeners.push(listener);

    }

  }

  unregisterDataChangeListener(listener: DataChangeListener) {

    const pos = this.listeners.indexOf(listener);

    if (pos >= 0) {

      this.listeners.splice(pos, 1);

    }

  }

  reloadTableView(): void {

    this.listeners.forEach(listener => {

      listener.onDataReloaded();

    })

  }

}