HarmonyOS 动态UI点击事件处理

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

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa
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%") 
  } 
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS UI组件事件拦截处理
311浏览 • 1回复 待解决
父组件中如何处理子组件内点击事件
2653浏览 • 1回复 待解决
HarmonyOS 富文本点击事件
316浏览 • 1回复 待解决
HarmonyOS ImageSpan点击事件无法触发
376浏览 • 1回复 待解决
HarmonyOS 屏幕点击事件监控代码
324浏览 • 1回复 待解决
HarmonyOS UI组件自定义点击范围
246浏览 • 1回复 待解决
图片处理(加动态水印)
271浏览 • 1回复 待解决
Slider拦截点击事件失败
209浏览 • 1回复 待解决
HarmonyOS 自定义组件的事件处理
315浏览 • 1回复 待解决
滑动嵌套事件冲突处理
214浏览 • 0回复 待解决
如何禁止Button的点击事件
480浏览 • 1回复 待解决
鸿蒙事件拦截分发处理
10368浏览 • 2回复 待解决
点击事件冒泡不符合预期
700浏览 • 1回复 待解决