在HarmonyOS NEXT开发中动态UI点击事件处理？

Question

在HarmonyOS NEXT开发中动态UI点击事件处理？通过buildNodeFrame可以动态生成多级的UI树，在这个UI树上面，可能很多元素都有自己独立的点击事件，怎么在一个App内存在多个NodeContainer的场景下，将NodeContainer容器的UI树上的元素的点击事件可以透传分发到对应的NodeContainer的事件，将事件收敛。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

具体解决方案：

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%") 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。