中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
通过buildNodeFrame可以动态生成多级的UI树,在这个UI树上面,可能很多元素都有自己独立的点击事件,怎么在一个App内存在多个NodeContainer的场景下,将NodeContainer容器的UI树上的元素的点击事件可以透传分发到对应的NodeContainer的事件,将事件收敛。
微信扫码分享
import Two from ‘./Two’ @Entry @Component struct Index { build() { Row() { Column() { Two({ onClickOK: (): void => { console.log(‘test’) } }) } .width(‘100%’) } .height(‘100%’) } } @Component export default struct Two { onClickOK?: () => void; build() { Row() { Column() { Button(‘事件’) .onClick(()=>{ if (this.onClickOK !== undefined) { this.onClickOK() } }) } .width(‘100%’) } .height(‘100%’) } } 请参考代码如下: import { UIContext } from '@ohos.ArkUI.UIContext'; import { NodeController, BuilderNode, Size, FrameNode } from '@ohos.ArkUI.node'; class Params { text: string = "this is a text" onClickOK?: () => void; } @Builder function buttonBuilder(params: Params) { Column() { Button("child") .fontSize(12) .borderRadius(8) .borderWidth(2) .backgroundColor(Color.Orange) .onClick(() => { if (params.onClickOK) { console.log("child onClick") params.onClickOK() } }) } } class MyNodeController extends NodeController { private buttonNode: BuilderNode<[Params]> | null = null; private onClickOK?: () => void; private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder); constructor(onClickOK: () => void) { super(); this.onClickOK = onClickOK; } makeNode(uiContext: UIContext): FrameNode { if (this.buttonNode == null) { this.buttonNode = new BuilderNode(uiContext); this.buttonNode.build(this.wrapBuilder, { text: "This is a Button", onClickOK: this.onClickOK}) } return this.buttonNode!.getFrameNode()!; } aboutToResize(size: Size) { console.log("aboutToResize width : " + size.width + " height : " + size.height) } aboutToAppear() { console.log("aboutToAppear") } aboutToDisappear() { console.log("aboutToDisappear"); } onTouchEvent(event:TouchEvent) { console.log("onTouchEvent"); } } @Entry @Component struct Index { private myNodeController: MyNodeController = new MyNodeController(() => { console.log("parent onClick") }); build() { Column() { NodeContainer(this.myNodeController) } .padding({ left: 35, right: 35, top: 35 }) .width("100%") .height("100%") } }