HarmonyOS 自定义组件如何写自定义事件?

HarmonyOS 自定义组件如何写自定义事件。

HarmonyOS
2024-09-29 12:36:58
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

请参考以下代码:

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

@Observed  
class HSItemData {  
  choose: boolean = false  
  constructor(choose: boolean) {  
    this.choose = choose  
  }  
}  
@Observed  
class HSTestDataModel {  
  itemArray: Array<HSItemData> = new Array()  
  
  constructor(itemArray: HSItemData[]) {  
    this.itemArray = itemArray  
  }  
}  
@Component  
struct HSCell {  
  @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  
@Component  
export struct HSTestPage {  
  listeners: DataChangeListener[] = []  
  @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();  
    })  
  }  
}
分享
微博
QQ
微信
回复
2024-09-29 17:59:32
相关问题
HarmonyOS 自定义组件事件处理
268浏览 • 1回复 待解决
自定义弹窗自定义转场动画
896浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
253浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
324浏览 • 1回复 待解决
HarmonyOS如何自定义组件的Controller?
181浏览 • 1回复 待解决
如何自定义组件原型菜单
782浏览 • 1回复 待解决
如何自定义模拟Tabs组件
800浏览 • 1回复 待解决
ArkTs如何自定义容器组件
2951浏览 • 1回复 待解决
HarmonyOS如何手动重置自定义组件
230浏览 • 1回复 待解决
如何实现H5自定义事件
2180浏览 • 1回复 待解决
自定义组件嵌套子组件
9309浏览 • 3回复 待解决
自定义组件如何导出、引入?
2186浏览 • 1回复 待解决
HarmonyOS 自定义键盘
150浏览 • 1回复 待解决
返回按钮是否可以自定义事件
132浏览 • 1回复 待解决
HarmonyOS ArkUI加载自定义组件
311浏览 • 1回复 待解决
HarmonyOS 如何自定义tab
277浏览 • 2回复 待解决
提问
该提问已有0人参与 ,帮助了0人