openharmony容器组件之Badge

Badge：新事件标记组件，在组件上提供事件信息展示能力
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})

count：设置提醒消息数
position：设置提示点显示位置(BadgePosition)
    BadgePosition：RightTop（圆点显示在右上角），Right（圆点显示在右侧纵向居中），Left（圆点显示在左侧纵向居中）    
maxCount：最大消息数，超过最大消息时仅显示maxCount+
style：Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸（BadgeStyle）
    BadgeStyle：
        color            文本颜色
        fontSize       文本大小
        badgeSize    badge的大小
        badgeColor   badge的颜色

效果如图：

代码：

@Entry
@Component
struct BadgeT {
  @State counts: number = 1
  @State message: string = 'new'
 
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        //显示消息数量，点击增加消息数量值
        Badge({
          count: this.counts,
          maxCount: 99,
          style: { color: 0xffffff, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
        }) {
          Button('message').onClick(() => {
            this.counts++
          }).width(100).height(50).backgroundColor(0x317aa)
        }.width(100).height(50)
 
        //显示消息在右侧上角，显示消息内容
        Badge({
          value: this.message,
          style: { color: 0xffffff, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } }) {
          Text('message')
            .width(80)
            .height(50)
            .fontSize(16)
            .lineHeight(37)
            .borderRadius(10)
            .textAlign(TextAlign.Center)
            .backgroundColor(0xf3f4ED)
        }.width(80).height(50)
 
        //显示消息圆点在右侧
        Badge({
          value: ' ',
          position: BadgePosition.Right, style: { badgeSize: 6, badgeColor: Color.Red } }) {
          Text("message")
            .width(90)
            .height(50)
            .fontSize(16)
            .lineHeight(37)
            .borderRadius(10)
            .textAlign(TextAlign.Center)
            .backgroundColor(0xf3f4ED)
        }.width(90).height(50)
      }
    }
    .width('100%')
    .height('100%')
    .margin({ top: 10 })
  }
}