HarmonyOS 定义自定义组件?

@Component
export struct NoteInTitle {

  @Prop title: string
  @Prop fontSize: number = 13
  @Prop enable: boolean = true
  // maxLines属性只有某些场景需要,这个导致我的build方法写了一个大的if-else,有没有更好的写法呢?
  @Prop maxLines: number

  build() {
    if (this.maxLines) {
      Text(this.title)
        .fontSize(this.fontSize)
        .enabled(this.enable)
        .maxLines(this.maxLines)
        .stateStyles({
          normal: {
            .fontColor($r('app.color.normal_of_title_text'))
          },
          disabled: {
            .fontColor($r('app.color.disable_of_text'))
          }
        })
    } else {
      Text(this.title)
        .fontSize(this.fontSize)
        .enabled(this.enable)
        .maxLines(this.maxLines)
        .stateStyles({
          normal: {
            .fontColor($r('app.color.normal_of_title_text'))
          },
          disabled: {
            .fontColor($r('app.color.disable_of_text'))
          }
        })
    }
  }
}

在上述代码中,创建了一个自定义组件:NoteInTitle,组件功能主要是在enable和disable时提供两种文本展示颜色;在某些场景下,需要设置maxLines属性,在外部引用该组件时,因为组件不是Text,无法单独设置maxLines;所以将maxLines属性封装在NoteInTitle内部,但这导致在为Text组件设置maxLines属性时,必须要写一个大的if else,这里有没有更好的写法呢?

阅读 578
1 个回答

设置默认参数,调用的时候不用传递该参数,默认就行:

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct myHello {
  @State message:string = 'Hello World';
  @State title1:string = '11111111111111111111111111111111111111';
  @State title2:string = '222222222222222222222222222222222222222222222222222222222222222222';
  @State title3:string = '333333333333333333333333333333333333333333333333333333333333333333333333333333333';
  @State title4:string = '444444444444444444444444444444444444444444444444444444444444444';
  @State maxNum1:number = 1;
  @State maxNum2:number = 2;
  @State maxNum3:number = 3;
  @State maxNum4:number = 4;
  build() {
    RelativeContainer() {
      Column() {
        Text('我是第一排')
          .height(30)
        this.NoteInTitle(this.title1, 16, true, this.maxNum1)
        this.NoteInTitle(this.title2, 12, true, this.maxNum2)
        this.NoteInTitle(this.title3, 12, true, this.maxNum3)
        this.NoteInTitle(this.title4, 12, true) // 默认1排
      }
    }
  }
  @Builder NoteInTitle(title:string, fontsize:number = 12, enable:boolean, maxLines : number = 1) {
    Text(title)
      .fontSize(fontsize)
      .enabled(enable)
      .maxLines(maxLines)
      .width(140)
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进