ArkUI学习-角标

1、指定数字角标

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

创建数字标记组件。

参数名	参数类型	必填	默认值	参数描述
count	number	是	-	设置提醒消息数。说明：小于等于0时不显示信息标记。取值范围：[-2147483648,2147483647]，非整数时会舍去小数部分取整数部分，如5.5取5。
position	BadgePosition	否	BadgePosition.RightTop	设置提示点显示位置。
maxCount	number	否	99	最大消息数，超过最大消息时仅显示maxCount+。
style	BadgeStyle	是	-	Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

//1、count：指定数字角标
Badge({
  count: 111,
  position: BadgePosition.RightTop,//RightTop,Right,Left
  style: {
    fontSize: 16,
    badgeSize: 25,
    badgeColor: '#fa2a2d'
  }
}) {
  Image($r('app.media.bg'))
    .width(200)
}

2、指定文本角标

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

根据字符串创建标记组件。

参数名	参数类型	必填	默认值	参数描述
value	string	是	-	提示内容的文本字符串。
position	BadgePosition	否	BadgePosition.RightTop	设置提示点显示位置。
style	BadgeStyle	是	-	Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

//2、value：指定文本角标
Badge({
  value: 'New',
  position: BadgePosition.RightTop,//RightTop,Right,Left
  style: {
    fontSize: 16,
    badgeSize: 25,
    badgeColor: '#fa2a2d'
  }
}) {
  Text("当前版本：V2024.1216")
    .padding({
      left:10,
      right:30
    })
}

3、BadgePosition枚举说明

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

4、BadgeStyle对象说明

名称	类型	必填	默认值	描述
color	ResourceColor	否	Color.White	文本颜色。
fontSize	number或 string	否	10	文本大小。单位：vp说明：不支持设置百分比。
badgeSize	number或string	否	16	Badge的大小。不支持百分比形式设置。当设置为非法值时，按照默认值处理。单位：vp
badgeColor	ResourceColor	否	Color.Red	Badge的颜色。