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）处理。| 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时不显示信息标记。<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```ts 147// xxx.ets 148@Entry 149@Component 150struct BadgeExample { 151 @Builder tabBuilder(index: number) { 152 Column() { 153 if (index === 2) { 154 Badge({ 155 value: '', 156 style: { badgeSize: 6, badgeColor: '#FA2A2D' } 157 }) { 158 Image('/common/public_icon_off.svg') 159 .width(24) 160 .height(24) 161 } 162 .width(24) 163 .height(24) 164 .margin({ bottom: 4 }) 165 } else { 166 Image('/common/public_icon_off.svg') 167 .width(24) 168 .height(24) 169 .margin({ bottom: 4 }) 170 } 171 Text('Tab') 172 .fontColor('#182431') 173 .fontSize(10) 174 .fontWeight(500) 175 .lineHeight(14) 176 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 177 } 178 179 @Builder itemBuilder(value: string) { 180 Row() { 181 Image('common/public_icon.svg').width(32).height(32).opacity(0.6) 182 Text(value) 183 .width(177) 184 .height(21) 185 .margin({ left: 15, right: 76 }) 186 .textAlign(TextAlign.Start) 187 .fontColor('#182431') 188 .fontWeight(500) 189 .fontSize(16) 190 .opacity(0.9) 191 Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) 192 }.width('100%').padding({ left: 12, right: 12 }).height(56) 193 } 194 195 build() { 196 Column() { 197 Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 198 Tabs() { 199 TabContent() 200 .tabBar(this.tabBuilder(0)) 201 TabContent() 202 .tabBar(this.tabBuilder(1)) 203 TabContent() 204 .tabBar(this.tabBuilder(2)) 205 TabContent() 206 .tabBar(this.tabBuilder(3)) 207 } 208 .width(360) 209 .height(56) 210 .backgroundColor('#F1F3F5') 211 212 Column() { 213 Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 214 List({ space: 12 }) { 215 ListItem() { 216 Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 }) 217 } 218 .width('100%') 219 .height(56) 220 .backgroundColor('#FFFFFF') 221 .borderRadius(24) 222 .align(Alignment.Start) 223 224 ListItem() { 225 Badge({ 226 value: 'New', 227 position: BadgePosition.Right, 228 style: { badgeSize: 16, badgeColor: '#FA2A2D' } 229 }) { 230 Text('list2').width(27).height(19).fontSize(14).fontColor('#182431') 231 }.width(49.5).height(19) 232 .margin({ left: 12 }) 233 } 234 .width('100%') 235 .height(56) 236 .backgroundColor('#FFFFFF') 237 .borderRadius(24) 238 .align(Alignment.Start) 239 }.width(336) 240 241 Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 242 List() { 243 ListItem() { 244 this.itemBuilder('list1') 245 } 246 247 ListItem() { 248 Row() { 249 Image('common/public_icon.svg').width(32).height(32).opacity(0.6) 250 Badge({ 251 count: 1, 252 position: BadgePosition.Right, 253 style: { badgeSize: 16, badgeColor: '#FA2A2D' } 254 }) { 255 Text('list2') 256 .width(177) 257 .height(21) 258 .textAlign(TextAlign.Start) 259 .fontColor('#182431') 260 .fontWeight(500) 261 .fontSize(16) 262 .opacity(0.9) 263 }.width(240).height(21).margin({ left: 15, right: 11 }) 264 265 Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) 266 }.width('100%').padding({ left: 12, right: 12 }).height(56) 267 } 268 269 ListItem() { 270 this.itemBuilder('list3') 271 } 272 273 ListItem() { 274 this.itemBuilder('list4') 275 } 276 } 277 .width(336) 278 .height(232) 279 .backgroundColor('#FFFFFF') 280 .borderRadius(24) 281 .padding({ top: 4, bottom: 4 }) 282 .divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 }) 283 }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 }) 284 }.width('100%') 285 } 286} 287``` 288 289 290 291### 示例2 292 293```ts 294// 该示例实现了Badge组件显隐时缩放 295@Entry 296@Component 297struct Index { 298 @State badgeCount: number = 1 299 300 build() { 301 Column({ space: 40 }) { 302 Badge({ 303 count: this.badgeCount, 304 style: {}, 305 position: BadgePosition.RightTop, 306 }) { 307 Image($r("app.media.icon")) 308 .width(50) 309 .height(50) 310 } 311 .width(55) 312 Button('count 0').onClick(() => { 313 this.badgeCount = 0 314 }) 315 Button('count 1').onClick(() => { 316 this.badgeCount = 1 317 }) 318 } 319 .margin({top: 20}) 320 } 321} 322``` 323 324 325
