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,这里有没有更好的写法呢?

HarmonyOS
17h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

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

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)
  }
}
分享
微博
QQ
微信
回复
13h前
相关问题
HarmonyOS 自定义组件问题
400浏览 • 1回复 待解决
HarmonyOS ArkUI加载自定义组件
461浏览 • 1回复 待解决
自定义组件嵌套子组件
9537浏览 • 3回复 待解决
自定义弹窗自定义转场动画
1161浏览 • 1回复 待解决
HarmonyOS CoverFlow效果自定义组件实现
290浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
466浏览 • 1回复 待解决
HarmonyOS 如何主动销毁自定义组件
71浏览 • 1回复 待解决
HarmonyOS 跨模块引用自定义组件
20浏览 • 1回复 待解决
HarmonyOS如何自定义组件的Controller?
376浏览 • 1回复 待解决
HarmonyOS 自定义组件生命周期
8浏览 • 0回复 待解决
HarmonyOS 自定义组件如何获取高度?
207浏览 • 1回复 待解决
HarmonyOS 自定义组件的事件处理
406浏览 • 1回复 待解决
HarmonyOS UI组件自定义点击范围
338浏览 • 1回复 待解决
HarmonyOS 自定义弹框组件问题
485浏览 • 1回复 待解决
HarmonyOS 键盘顶部添加自定义组件
304浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人