第十节HarmonyOS 常用容器组件1-Badge

1、描述

可以附加在单个组件上用于信息标记的容器组件。支持单个子组件。

2、接口

方法1：Badge(value:{count: number, position?: BadgePosition, maxCount?: number, style:BadgeStyle})

方法2：Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})

3、参数

参数名	参数类型	必填	描述
count	number	是	设置提醒消息数。说明：小于等于0时不显示信息标记。
position	BadgePosition	否	设置提示点显示的位置。
maxCount	number	否	最大消息数，超过最大消息数时仅显示maxCount+。
style	BadgeStyle	是	Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。
value	string	是	提示内容的文本字符串。

4、BadgePosition枚举说明：

名称	描述
RightTop	圆点显示在右上角。
Right	圆点显示在右侧纵向居中。
Left	圆点显示在左侧纵向居中。

5、BadgeStyle对象说明：

名称	类型	必填	默认值	描述
color	ResourceColor	否	Color.White	文本颜色。
fontSize	number | string	否	10	文本大小。单位：vp。
badgeSize	number | string	否	16	Badge的大小。不支持百分比形式设置。单位：vp。
badgeColor	ResourceColor	否	Color.Red	Badge的颜色。

6、示例

import router from '@ohos.router'

@Entry
@Component
struct BadgePage {
  @State message: string = '可以附加在单个组件上用于信息标记的容器组件。'

  /**
   * Tab菜单键
   */
  @Builder
  TabBuilder(index: number) {
    Column() {
      if (index == 2) {
        Badge({ value: "", style: { badgeSize: 10, badgeColor: Color.Red }, position: BadgePosition.RightTop }) {
          Image($r('app.media.icon'))
            .width(30)
            .height(30)
            .margin({ bottom: 4 })
        }
      } else {
        Image($r('app.media.icon'))
          .width(30)
          .height(30)
          .margin({ bottom: 4 })
      }
      Text("Tab")
        .fontColor('#182431')
        .fontSize(20)
        .fontWeight(500)

    }.width("100%").height("100%").justifyContent(FlexAlign.Center)
  }

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width("96%")

          Blank(12)
          Tabs() {
            TabContent().tabBar(this.TabBuilder(0))
            TabContent().tabBar(this.TabBuilder(1))
            TabContent().tabBar(this.TabBuilder(2))
            TabContent().tabBar(this.TabBuilder(3))
          }.width("96%").height(60).backgroundColor('#F1F3F5')

          Blank(12)
          Column() {
            Text("stringBadge").fontColor('#182431').fontSize(20).fontWeight(FontWeight.Bold)
            List() {
              ListItem() {
                Text("stringBadgeList1").fontSize(20).fontColor(Color.White).padding({ left: 20 })
              }
              .width('100%')
              .height(56)
              .backgroundColor('#999999')
              .borderRadius(24)
              .align(Alignment.Start)

              ListItem() {
                Badge({
                  value: "New",
                  position: BadgePosition.Right,
                  style: { badgeSize: 20, badgeColor: '#FA2A2D' }
                }) {
                  Text("stringBadgeList2")
                    .fontSize(20)
                    .fontColor(Color.White)
                    .margin({ right: 28 })
                }.margin({ left: 20 })
              }
              .width('100%')
              .height(56)
              .backgroundColor('#999999')
              .borderRadius(24)
              .align(Alignment.Start)
              .margin({ top: 10 })
            }.width("96%").margin({ top: 10 })
          }

          Blank(12)
          Column() {
            List({ space: 10 }) {
              ListItem() {
                Row() {
                  Image($r('app.media.icon')).width(30).height(30).margin({ left: 20 })
                  Text("List01").fontColor(Color.White).fontSize(20).margin({ left: 12 })
                  Blank()
                  Image($r('app.media.icon')).width(30).height(30).margin({ right: 20 })
                }.width("100%")
                .height(56)
              }

              ListItem() {
                Row() {
                  Image($r('app.media.icon')).width(30).height(30).margin({ left: 20 })
                  Text("List02").fontColor(Color.White).fontSize(20).margin({ left: 12 })
                  Blank()
                  Badge({
                    count: 1,
                    position: BadgePosition.Right,
                    style: { badgeSize: 20, badgeColor: '#FA2A2D' }
                  }) {
                    Text("")
                  }

                  Image($r('app.media.icon')).width(30).height(30).margin({ right: 20 })
                }.width("100%")
                .height(56)
              }

              ListItem() {
                Row() {
                  Image($r('app.media.icon')).width(30).height(30).margin({ left: 20 })
                  Text("List03").fontColor(Color.White).fontSize(20).margin({ left: 12 })
                  Blank()
                  Image($r('app.media.icon')).width(30).height(30).margin({ right: 20 })
                }.width("100%")
                .height(56)
              }

            }.width("96%")
            .divider({ strokeWidth: 0.5, color: Color.Black, startMargin: 12, endMargin: 12 })
            .backgroundColor('#999999')
            .borderRadius(24)
          }

          Blank(12)
          Button("Badge文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/containerComponents/badge/BadgeDesc",
              })
            })

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

7、效果图