HarmonyOS鸿蒙Next中组件的事件传递
HarmonyOS鸿蒙Next中组件的事件传递
我想在$r('app.media.startIcon')设置点击事件，然后想在同一级的子组件CenterScreen里的子组件处理，怎样传递
import CenterScreen from "./CenterScreen"
import { uniformTypeDescriptor } from "@kit.ArkData"
@Component
export struct CenterView {
build() {
Column({space: 8}) {
Row() {
CenterScreen()
.layoutWeight(0.95)
.height('100%')
.padding({
left: 12,
top: 12,
bottom: 12
})
Column({space: 24}) {
Image($r('app.media.ic_clear'))
.width(24)
.height(24)
Image($r('app.media.ic_plan_edit'))
.width(24)
.height(24)
}
.layoutWeight(0.05)
.height('100%')
.justifyContent(FlexAlign.Center)
.padding(12)
}
.width('100%')
.height('75%')
.backgroundImage($r('app.media.ic_home_pay_bg'), ImageRepeat.XY)
.backgroundImageSize({ width: '100%', height: '100%' })
Row() {
// 下部分内容
Image($r('app.media.startIcon'))
.width(100)
.height(100)
.draggable(true)
.onDragEnd((event: DragEvent) => {
let ret = event.getResult();
console.log('drag', ret)
})
}
.width('100%')
.height('25%')
.backgroundImage($r('app.media.ic_bottom_bg'), ImageRepeat.XY)
.backgroundImageSize({ width: '100%', height: '100%' })
.allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
}
.width('80%')
.height('100%')
.flexGrow(1)
.padding({
left: 8,
bottom: 8
})
}
}
更多关于HarmonyOS鸿蒙Next中组件的事件传递的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于HarmonyOS鸿蒙Next中组件的事件传递的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
可以定义一个controller类，在controller类中定义和子组件中类型相同的方法，在子组件中将实际封装的方法给到controller。父组件在使用时，new一个controller对象传入子类中，在父组件中调用controller对应的方法。参考demo：
struct Child {
@State private text: string = '初始值'
private controller: ChildController = new ChildController();
aboutToAppear() {
if(this.controller) {
//给controller对应的方法赋值
this.controller.changeText = this.changeText
}
}
//封装的能力
private changeText = (value: string) =>{
this.text = value
}
build() {
Column() {
Text(this.text)
}
}
}
//定义controller对象
class ChildController {
changeText = (value: string) => {}
}
@Entry
@Component
struct Parent {
private ChildRef = new ChildController()
build() {
Column() {
Text('调用Child的changeText').fontSize('18vp').fontColor(Color.Gray)
Divider()
Child({ controller:this.ChildRef })
Button('Parent调用childer的changeText').onClick(() => {
this.ChildRef.changeText('Parent调用childer的changeText')
})
}
.justifyContent(FlexAlign.Center)
.width("100%")
.height("100%")
}
}
在HarmonyOS（鸿蒙）Next中，组件的事件传递主要通过事件分发机制来实现。鸿蒙系统采用了一种基于组件树的事件传递模型，事件从根组件开始，逐级向下传递到目标组件，或在传递过程中被拦截处理。
事件传递主要分为三个阶段：捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从根组件向下传递到目标组件；在目标阶段，事件到达目标组件并执行相应的处理逻辑；在冒泡阶段，事件从目标组件向上传递回根组件。
鸿蒙系统提供了Component类作为所有组件的基类，开发者可以通过重写onTouchEvent、onKeyEvent等方法来处理特定事件。此外，鸿蒙还提供了EventDispatcher类，用于管理事件的传递和处理。
在事件传递过程中，开发者可以通过setInterceptTouchEvent方法来拦截事件，阻止其继续向下传递。也可以通过setTouchEventListener方法为组件设置自定义的事件监听器，来处理特定的事件。
鸿蒙Next中的事件传递机制与Android和iOS的事件传递机制类似，但在具体实现上有所优化，以适应鸿蒙系统的架构和性能要求。
