1# Badge 2 3信息标记组件，可以附加在单个组件上用于信息提醒的容器组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12支持单个子组件。 13 14> **说明：** 15> 16> 子组件类型：系统组件和自定义组件，支持渲染控制类型（[if/else](../../../quick-start/arkts-rendering-control-ifelse.md)、[ForEach](../../../quick-start/arkts-rendering-control-foreach.md)和[LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)）。 17 18 19## 接口 20 21### Badge 22 23Badge(value: BadgeParamWithNumber) 24 25根据数字创建标记组件。 26 27**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33**参数：** 34 35| 参数名 | 类型 | 必填 | 说明 | 36| -------- | -------- | -------- | -------- | 37| value | [BadgeParamWithNumber](#badgeparamwithnumber对象说明)| 是 | 数字标记组件参数。| 38 39### Badge 40 41Badge(value: BadgeParamWithString) 42 43根据字符串创建标记组件。 44 45**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 46 47**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51从API version 12开始，该组件显隐时支持scale动效。 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| ------ | ----------------------------------------------------- | ---- | -------------------- | 57| value | [BadgeParamWithString](#badgeparamwithstring对象说明) | 是 | 字符串标记组件参数。 | 58 59## BadgeParam对象说明 60 61包含创建Badge组件的基础参数。 62 63**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 64 65**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 66 67**系统能力：** SystemCapability.ArkUI.ArkUI.Full 68 69| 名称 | 类型 | 必填 | 说明 | 70| -------- | -------- | -------- | -------- | 71| position | [BadgePosition](#badgeposition枚举说明)\|[Position<sup>10+</sup>](ts-types.md#position) | 否| 设置提示点显示位置。<br/>默认值：BadgePosition.RightTop <br/>**说明：** <br/> Position作为入参，不支持设置百分比；设置为非法值时，默认（0,0）处理。（0，0）为组件左上角位置。<br/>BadgePosition作为入参时，会跟随[Direction](ts-appendix-enums.md#direction)属性控制镜像显示。| 72| style | [BadgeStyle](#badgestyle对象说明) | 是 | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | 73 74 75## BadgeParamWithNumber对象说明 76 77BadgeParamWithNumber继承自[BadgeParam](#badgeparam对象说明)，具有BadgeParam的全部属性。 78 79**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 80 81**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 82 83**系统能力：** SystemCapability.ArkUI.ArkUI.Full 84 85| 名称 | 类型 | 必填 | 说明 | 86| -------- | -------- | -------- | -------- | 87| count | number | 是 | 设置提醒消息数。<br/>**说明：** <br/>小于等于0且小于maxCount时不显示信息标记。<br/>取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。 | 88| maxCount | number | 否 | 最大消息数，超过最大消息时仅显示maxCount+。<br/>默认值：99<br/>取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。 | 89 90## BadgeParamWithString对象说明 91 92BadgeParamWithString继承自[BadgeParam](#badgeparam对象说明)，具有BadgeParam的全部属性。 93 94**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 95 96**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100| 名称 | 类型 | 必填 | 说明 | 101| -------- | -------- | -------- | -------- | 102| value | string | 是 | 提示内容的文本字符串。 | 103 104## BadgePosition枚举说明 105 106**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 107 108**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 109 110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 111 112| 名称 | 值 | 说明 | 113| -------- | -------- |-------- | 114| RightTop | 0 | 圆点显示在右上角。 | 115| Right | 1 | 圆点显示在右侧纵向居中。 | 116| Left | 2 | 圆点显示在左侧纵向居中。 | 117 118## BadgeStyle对象说明 119 120**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 121 122**系统能力：** SystemCapability.ArkUI.ArkUI.Full 123 124| 名称 | 类型 | 必填 | 说明 | 125| ------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 126| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文本颜色。<br/>默认值：Color.White<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 127| fontSize | number \| string | 否 | 文本大小。<br/>默认值：10<br/>单位：fp<br/>**说明：** <br/>不支持设置百分比。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 128| badgeSize | number \| string | 否 | Badge的大小。<br/>默认值：16<br/>单位：vp<br/>**说明：** <br/>不支持设置百分比。当设置为非法值时，按照默认值处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 129| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | Badge的颜色。<br/>默认值：Color.Red<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 130| fontWeight<sup>10+</sup> | number \|[FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 设置文本的字体粗细。<br/>默认值：FontWeight.Normal<br/>**说明：** <br/>不支持设置百分比。 | 131| borderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 底板描边颜色。<br/>默认值：Color.Red | 132| borderWidth<sup>10+</sup> | [Length](ts-types.md#length) | 否 | 底板描边粗细。<br/>默认值：1<br/>单位：vp<br/>**说明：** <br/>不支持设置百分比。 | 133 134## 属性 135 136支持[通用属性](ts-universal-attributes-size.md)。 137 138## 事件 139 140支持[通用事件](ts-universal-events-click.md)。 141 142## 示例 143 144### 示例1（设置标记组件内容） 145 146该示例通过value和count属性，实现了传入空值、字符、数字时标记组件展现不同的效果。 147 148```ts 149// xxx.ets 150@Entry 151@Component 152struct BadgeExample { 153 @Builder 154 tabBuilder(index: number) { 155 Column() { 156 if (index === 2) { 157 Badge({ 158 value: '', 159 style: { badgeSize: 6, badgeColor: '#FA2A2D' } 160 }) { 161 Image('/common/public_icon_off.svg') 162 .width(24) 163 .height(24) 164 } 165 .width(24) 166 .height(24) 167 .margin({ bottom: 4 }) 168 } else { 169 Image('/common/public_icon_off.svg') 170 .width(24) 171 .height(24) 172 .margin({ bottom: 4 }) 173 } 174 Text('Tab') 175 .fontColor('#182431') 176 .fontSize(10) 177 .fontWeight(500) 178 .lineHeight(14) 179 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 180 } 181 182 @Builder 183 itemBuilder(value: string) { 184 Row() { 185 Image('common/public_icon.svg').width(32).height(32).opacity(0.6) 186 Text(value) 187 .width(177) 188 .height(21) 189 .margin({ left: 15, right: 76 }) 190 .textAlign(TextAlign.Start) 191 .fontColor('#182431') 192 .fontWeight(500) 193 .fontSize(16) 194 .opacity(0.9) 195 Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) 196 }.width('100%').padding({ left: 12, right: 12 }).height(56) 197 } 198 199 build() { 200 Column() { 201 // 红点类型的标记组件 202 Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 203 Tabs() { 204 TabContent() 205 .tabBar(this.tabBuilder(0)) 206 TabContent() 207 .tabBar(this.tabBuilder(1)) 208 TabContent() 209 .tabBar(this.tabBuilder(2)) 210 TabContent() 211 .tabBar(this.tabBuilder(3)) 212 } 213 .width(360) 214 .height(56) 215 .backgroundColor('#F1F3F5') 216 217 // 根据字符创建的标记组件 218 Column() { 219 Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 220 List({ space: 12 }) { 221 ListItem() { 222 Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 }) 223 } 224 .width('100%') 225 .height(56) 226 .backgroundColor('#FFFFFF') 227 .borderRadius(24) 228 .align(Alignment.Start) 229 230 ListItem() { 231 Badge({ 232 value: 'New', 233 position: BadgePosition.Right, 234 style: { badgeSize: 16, badgeColor: '#FA2A2D' } 235 }) { 236 Text('list2').width(27).height(19).fontSize(14).fontColor('#182431') 237 }.width(49.5).height(19) 238 .margin({ left: 12 }) 239 } 240 .width('100%') 241 .height(56) 242 .backgroundColor('#FFFFFF') 243 .borderRadius(24) 244 .align(Alignment.Start) 245 }.width(336) 246 247 // 根据数字创建的标记组件 248 Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 249 List() { 250 ListItem() { 251 this.itemBuilder('list1') 252 } 253 254 ListItem() { 255 Row() { 256 Image('common/public_icon.svg').width(32).height(32).opacity(0.6) 257 Badge({ 258 count: 1, 259 position: BadgePosition.Right, 260 style: { badgeSize: 16, badgeColor: '#FA2A2D' } 261 }) { 262 Text('list2') 263 .width(177) 264 .height(21) 265 .textAlign(TextAlign.Start) 266 .fontColor('#182431') 267 .fontWeight(500) 268 .fontSize(16) 269 .opacity(0.9) 270 }.width(240).height(21).margin({ left: 15, right: 11 }) 271 272 Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) 273 }.width('100%').padding({ left: 12, right: 12 }).height(56) 274 } 275 276 ListItem() { 277 this.itemBuilder('list3') 278 } 279 280 ListItem() { 281 this.itemBuilder('list4') 282 } 283 } 284 .width(336) 285 .height(232) 286 .backgroundColor('#FFFFFF') 287 .borderRadius(24) 288 .padding({ top: 4, bottom: 4 }) 289 .divider({ 290 strokeWidth: 0.5, 291 color: 'rgba(0,0,0,0.1)', 292 startMargin: 60, 293 endMargin: 12 294 }) 295 }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 }) 296 }.width('100%') 297 } 298} 299``` 300 301 302 303### 示例2（设置数字控制标记显隐） 304 305该示例通过count属性，实现了设置数字0和1时标记组件的隐藏和显示效果。 306 307```ts 308// 该示例实现了Badge组件显隐时缩放 309@Entry 310@Component 311struct Index { 312 @State badgeCount: number = 1 313 314 build() { 315 Column({ space: 40 }) { 316 Badge({ 317 count: this.badgeCount, 318 style: {}, 319 position: BadgePosition.RightTop, 320 }) { 321 Image($r("app.media.startIcon")) 322 .width(50) 323 .height(50) 324 } 325 .width(55) 326 327 Button('count 0').onClick(() => { 328 this.badgeCount = 0 329 }) 330 Button('count 1').onClick(() => { 331 this.badgeCount = 1 332 }) 333 } 334 .margin({ top: 20 }) 335 } 336} 337``` 338 339 340
