标签难度样式代码HarmonyOS NEXT（适用API12以上版本）

HarmonyOS NEXT

1.三种难度样式

2.实现 tag 组件，支持自定义文字和颜色优先

//难度标签
export interface HcTagInfo {
  text: string;
  color: ResourceColor;
}

@Component
export  struct HcTag {
  //难度
  @Prop difficulty: number = 0
  //文字
  @Prop text: string = ''
  //文字颜色
  @Prop color: ResourceColor = ''

  build() {
    Text(this.text || infoMap[this.difficulty].text)
      .fontColor(this.color || infoMap[this.difficulty].color)
      .fontSize(10)
      .padding({ left: 6, right: 6 })
      .height(18)
      .constraintSize({ minWidth: 30 })//最小宽度
      .borderRadius(2)
      .backgroundColor($r('app.color.common_gray_bg'))
      .textAlign(TextAlign.Center)
  }
}

const infoMap: Record<number, HcTagInfo> = {
  1: { text: "简单", color: $r("app.color.common_green") },
  2: { text: "简单", color: $r("app.color.common_green") },
  3: { text: "一般", color: $r("app.color.common_blue") },
  4: { text: "一般", color: $r("app.color.common_blue") },
  5: { text: "困难", color: $r("app.color.common_main_color") },
};

3.测试，实现效果

Column({ space: 10 }) {
            HcTag({ difficulty: 1 })
            HcTag({ difficulty: 2 })
            HcTag({ difficulty: 3 })
            HcTag({ difficulty: 4 })
            HcTag({ difficulty: 5 })
          }