# 5.7:角标组件(Badge)

ArkUI 开发框架提供了 Badge 容器组件,它用来标记提示信息的容器组件,最常用的场景比如 Launcher 桌面上的消息提示等,本节笔者简单介绍一下 Badge 的使用。

# 5.7.1:Badge 定义介绍

interface BadgeInterface {
  (value: BadgeParamWithNumber): BadgeAttribute;
  (value: BadgeParamWithString): BadgeAttribute;
}

declare interface BadgeParam {
  position?: BadgePosition;
  style: BadgeStyle;
}

declare interface BadgeParamWithNumber extends BadgeParam {
  count: number;
  maxCount?: number;
}

declare interface BadgeParamWithString extends BadgeParam {
  value: string;
}

declare interface BadgeParam {
  position?: BadgePosition;
  style: BadgeStyle;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Badge 的构造方法允许接收 BadgeParamWithNumberBadgeParamWithString 两种类型的参数,它们都继承自 BadgeParamBadgeParam 参数说明如下:

  • position:设置 badge 的显示位置,BadgePosition 提供了以下 3 种位置:

    • Right: badge 显示在右侧纵向居中。
    • RightTop(默认值): badge 显示在右上角。
    • Left: badge 显示在左侧纵向居中。
  • style:设置 badge 的显示样式,BadgeStyle 样式参数说明如下:

    • color:设置 badge 的文本颜色,默认为白色。
    • fontSize:设置 badge 的文本字体大小,默认为 10 vp。
    • badgeSize:设置 badge 的显示大小。
    • badgeColor:设置 badge 的背景颜色,默认为红色。

    简单样例如下所示:

    Badge({
      value: ' ',
      position: BadgePosition.Left,                // 设置 badge 居左显示
      style: {badgeSize: 10, badgeColor: Color.Red}// 设置 badge 的显示样式
    }) {
      Text("Badge")
        .size({width: 100, height: 50})
        .fontSize(20)
        .backgroundColor("#aabbcc")
    }
    .size({width: 100, height: 50})
    
    Badge({
      value: ' ',
      position: BadgePosition.Right,               // 设置 badge 居右显示
      style: {badgeSize: 10, badgeColor: Color.Red}// 设置 badge 的显示样式
    }) {
      Text("Badge")
        .size({width: 100, height: 50})
        .fontSize(20)
        .backgroundColor("#aabbcc")
    }
    .size({width: 100, height: 50})
    
    Badge({
      value: ' ',
      position: BadgePosition.RightTop,            // 设置 badge 居右上角显示
      style: {badgeSize: 10, badgeColor: Color.Red}// 设置 badge 的显示样式
    }) {
      Text("Badge")
        .size({width: 100, height: 50})
        .fontSize(20)
        .backgroundColor("#aabbcc")
    }
    .size({width: 100, height: 50})
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35

    样例运行结果如下图所示:

    5_7_1_1

BadgeParamWithNumber 可以根据数字创建提醒组件,各参数说明如下:

  • count:设置提醒消息数。
  • maxCount:设置提醒消息的最大数,超过最大消息时仅显示 maxCount+。

简单样例如下所示:

Badge({
  count: 10,                       // 设置 badge 显示的数量
  maxCount: 100,                   // 设置 badge 显示的最大数量
  position: BadgePosition.RightTop,// 设置 badge 显示在右上角
  style: {badgeColor: Color.Red}   // 设置 badge 的显示样式
}) {
  Text("Badge")
    .size({width: 100, height: 50})
    .fontSize(20)
    .backgroundColor("#aabbcc")
}
.size({width: 100, height: 50})

Badge({
  count: 110,                      // 设置 badge 显示的数量
  maxCount: 99,                    // 设置 badge 显示的最大数量
  position: BadgePosition.RightTop,// 设置 badge 显示在右上角
  style: {badgeColor: Color.Red}   // 设置 badge 的显示样式
}) {
  Text("Badge")
    .size({width: 100, height: 50})
    .fontSize(20)
    .backgroundColor("#aabbcc")
}
.size({width: 100, height: 50})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

样例运行结果如下图所示:

5_7_1_2

BadgeParamWithString 可以根据字符串创建提醒组件,各参数说明如下:

  • value:提示内容的文本字符串。

简单样例如下所示:

Badge({
  value: "aaa",                    // 设置 badge 的显示文本
  position: BadgePosition.RightTop,// 设置 badge 显示在右上角
  style: {badgeColor: Color.Red}   // 设置 badge 的显示样式
}) {
  Text("Badge")
    .size({width: 100, height: 50})
    .fontSize(20)
    .backgroundColor("#aabbcc")
}
.size({width: 100, height: 50})

Badge({
  value: "bbb",                    // 设置 badge 的显示文本
  position: BadgePosition.RightTop,// 设置 badge 显示在右上角
  style: {badgeColor: Color.Red}   // 设置 badge 的显示样式
}) {
  Text("Badge")
    .size({width: 100, height: 50})
    .fontSize(20)
    .backgroundColor("#aabbcc")
}
.size({width: 100, height: 50})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

样例运行结果如下图所示:

5_7_1_3

# 5.7.2:Badge 属性介绍

declare class BadgeAttribute extends CommonMethod<BadgeAttribute> {
}
1
2

由源码可知,Badge 没有定义额外的自有属性。

# 5.7.2:Badge 完整样例

@Entry @Component struct ComponentTest {

  @State counts: number = 1
  @State message: string = 'new'

  build() {
    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(0x317aff)
      }.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(18)
          .lineHeight(37)
          .borderRadius(10)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      .width(80).height(50)

      Badge({
        value: ' ',
        position: BadgePosition.RightTop,
        style: { badgeSize: 6, badgeColor: Color.Red }
      }) {
        Text('message')
          .width(90)
          .height(50)
          .fontSize(18)
          .lineHeight(37)
          .borderRadius(10)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }.width(90).height(50)
    }.width('100%').margin({ top: 10 })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

样例运行结果如下图所示:

5_7_1_4

📢:Badge 组件使用的时候要设置具体宽高,否则会铺满父组件。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2