HarmonyOS 自定义组件的事件处理

应用中有很多页面是有header的，包含一个箭头，标题，和动态子标题，比如（更多），我写了一个通用的的组件，

但是不知道如何处理如下问题：

1. 箭头是关闭当前页面，在自定义的Component中，如何实现

2. 子标题会根据不同的页面有不同的反应，如何在调用的地方传入点击事件，用于点击事件的回调呢？

@Component  
export struct BaseHeader{  
  @Prop title:string = '测试标题'  
  build() {  
    Stack() {  
      //返回箭头  
      Row() {  
        Image($r('app.media.ic_back')).height(24).width(24).margin({left:12})  
      }.justifyContent(FlexAlign.Start).width('100%').height('100%')  
      //标题  
      Row() {  
        Text(this.title).fontSize(17).fontWeight(400).fontColor($r('app.color.color_33322d'))  
      }.justifyContent(FlexAlign.Center).width('100%').height('100%')  
      //子标题以及自定义点击事件  
      Row() {  
        Text(this.title).fontSize(17).fontWeight(400).fontColor($r('app.color.color_33322d')).margin({right:12})  
      }.justifyContent(FlexAlign.End).width('100%').height('100%')  
    }.height(44).margin({ top: AppStorage.get('topHeight') })  
  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

HarmonyOS

zbw_apple

2024-10-23 12:30:44

浏览

回答 1

按赞同

按时间

FengTianYa

箭头事件可以使用router.back()，由于您使用的是stack堆叠容器，箭头事件触发不了，添加zIndex提升堆叠顺序就可以触发了，子标题的点击事件可以由父组件传入，具体代码如下：

//父组件

@Entry  
@Component  
export default struct TextPage {  
  @State title: string = 'Hello World';  
  onClickFun(){  
    console.log('0000000000000000000000000')  
  }  
  // @Builder  
  // CustomTitleBuilder(){  
  // Row() {  
  // Text('123').fontSize(17).fontWeight(400).fontColor(Color.Brown).margin({right:12})  
  // .onClick(()=>{  
  // if (this.onClickFun !== undefined) {  
  // this.onClickFun();  
  // }  
  // })  
  // }.justifyContent(FlexAlign.End).width('100%').height('100%')  
  // }  
  build() {  
    Row() {  
      Column() {  
        BaseHeader({  
          title:this.title,  
          onClickFun: (): void => this.onClickFun(),  
          // customBuilderParam: this.CustomTitleBuilder  
        })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

//BaseHeader组件

import { router } from '@kit.ArkUI';  
@Entry  
@Component  
export default struct BaseHeader {  
  @State message: string = 'Hello World';  
  @Prop title:string = '测试标题'  
  private onClickFun? = () => {};  
  private goBack = () => {};  
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam  
  //@BuilderParam customBuilderParam: () => void ;  
  build() {  
    Stack() {  
      //返回箭头  
      Row() {  
        Image($r('app.media.ic_back')).height(24).width(24).margin({left:12})  
          .onClick(()=>{  
            console.log('app.media.ic_back')  
            router.back()  
          })  
      }.justifyContent(FlexAlign.Start).width('100%').height('100%').zIndex(10)  
      //标题  
      Row() {  
        Text(this.title).fontSize(17).fontWeight(400).fontColor(Color.Black)  
      }.justifyContent(FlexAlign.Center).width('100%').height('100%')  
      // 1、子标题的事件可以通过父组件传递过来  
      Row() {  
        Text(this.title).fontSize(17).fontWeight(400).fontColor(Color.Brown).margin({right:12})  
          .onClick(()=>{  
            if (this.onClickFun !== undefined) {  
              this.onClickFun();  
            }  
          })  
      }.justifyContent(FlexAlign.End).width('100%').height('100%')  
      // //2、通过@BuilderParam引用父组件传过来的组件  
      // this.customBuilderParam()  
    }.height(44).margin({ top: AppStorage.get('topHeight') })  
  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

2024-10-23 14:55:12

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 自定义组件的事件处理

订阅鸿蒙技术特刊，精选内容抢先看