信息标记的容器组件

2024-01-22 17:47 更新

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

说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

支持单个子组件。

说明

子组件类型:系统组件和自定义组件,支持渲染控制类型(if/elseForEachLazyForEach)。

接口

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

创建数字标记组件。

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

参数类型

必填

默认值

参数描述

count

number

-

设置提醒消息数。

说明:

小于等于0时不显示信息标记。

取值范围:[-2147483648,2147483647],非整数时会舍去小数部分取整数部分,如5.5取5。

position

BadgePosition

BadgePosition.RightTop

设置提示点显示位置。

maxCount

number

99

最大消息数,超过最大消息时仅显示maxCount+。

style

BadgeStyle

-

Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。

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

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

参数类型

必填

默认值

参数描述

value

string

-

提示内容的文本字符串。

position

BadgePosition

BadgePosition.RightTop

设置提示点显示位置。

style

BadgeStyle

-

Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。

BadgePosition枚举说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称

描述

RightTop

圆点显示在右上角。

Right

圆点显示在右侧纵向居中。

Left

圆点显示在左侧纵向居中。

BadgeStyle对象说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称

类型

必填

默认值

描述

color

ResourceColor

Color.White

文本颜色。

fontSize

number | string

10

文本大小。

单位:vp

说明:

不支持设置百分比。

badgeSize

number | string

16

Badge的大小。不支持百分比形式设置。当设置为非法值时,按照默认值处理。

单位:vp

badgeColor

ResourceColor

Color.Red

Badge的颜色。

属性

支持通用属性

事件

支持通用事件

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct BadgeExample {
  5. @Builder TabBuilder(index: number) {
  6. Column() {
  7. if (index === 2) {
  8. Badge({
  9. value: '',
  10. style: { badgeSize: 6, badgeColor: '#FA2A2D' }
  11. }) {
  12. Image('/common/public_icon_off.svg')
  13. .width(24)
  14. .height(24)
  15. }
  16. .width(24)
  17. .height(24)
  18. .margin({ bottom: 4 })
  19. } else {
  20. Image('/common/public_icon_off.svg')
  21. .width(24)
  22. .height(24)
  23. .margin({ bottom: 4 })
  24. }
  25. Text('Tab')
  26. .fontColor('#182431')
  27. .fontSize(10)
  28. .fontWeight(500)
  29. .lineHeight(14)
  30. }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  31. }
  32. @Builder itemBuilder(value: string) {
  33. Row() {
  34. Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
  35. Text(value)
  36. .width(177)
  37. .height(21)
  38. .margin({ left: 15, right: 76 })
  39. .textAlign(TextAlign.Start)
  40. .fontColor('#182431')
  41. .fontWeight(500)
  42. .fontSize(16)
  43. .opacity(0.9)
  44. Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
  45. }.width('100%').padding({ left: 12, right: 12 }).height(56)
  46. }
  47. build() {
  48. Column() {
  49. Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
  50. Tabs() {
  51. TabContent()
  52. .tabBar(this.TabBuilder(0))
  53. TabContent()
  54. .tabBar(this.TabBuilder(1))
  55. TabContent()
  56. .tabBar(this.TabBuilder(2))
  57. TabContent()
  58. .tabBar(this.TabBuilder(3))
  59. }
  60. .width(360)
  61. .height(56)
  62. .backgroundColor('#F1F3F5')
  63. Column() {
  64. Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
  65. List({ space: 12 }) {
  66. ListItem() {
  67. Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 })
  68. }
  69. .width('100%')
  70. .height(56)
  71. .backgroundColor('#FFFFFF')
  72. .borderRadius(24)
  73. .align(Alignment.Start)
  74. ListItem() {
  75. Badge({
  76. value: 'New',
  77. position: BadgePosition.Right,
  78. style: { badgeSize: 16, badgeColor: '#FA2A2D' }
  79. }) {
  80. Text('list2').width(27).height(19).fontSize(14).fontColor('#182431')
  81. }.width(49.5).height(19)
  82. .margin({ left: 12 })
  83. }
  84. .width('100%')
  85. .height(56)
  86. .backgroundColor('#FFFFFF')
  87. .borderRadius(24)
  88. .align(Alignment.Start)
  89. }.width(336)
  90. Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
  91. List() {
  92. ListItem() {
  93. this.itemBuilder('list1')
  94. }
  95. ListItem() {
  96. Row() {
  97. Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
  98. Badge({
  99. count: 1,
  100. position: BadgePosition.Right,
  101. style: { badgeSize: 16, badgeColor: '#FA2A2D' }
  102. }) {
  103. Text('list2')
  104. .width(177)
  105. .height(21)
  106. .textAlign(TextAlign.Start)
  107. .fontColor('#182431')
  108. .fontWeight(500)
  109. .fontSize(16)
  110. .opacity(0.9)
  111. }.width(240).height(21).margin({ left: 15, right: 11 })
  112. Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
  113. }.width('100%').padding({ left: 12, right: 12 }).height(56)
  114. }
  115. ListItem() {
  116. this.itemBuilder('list3')
  117. }
  118. ListItem() {
  119. this.itemBuilder('list4')
  120. }
  121. }
  122. .width(336)
  123. .height(232)
  124. .backgroundColor('#FFFFFF')
  125. .borderRadius(24)
  126. .padding({ top: 4, bottom: 4 })
  127. .divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 })
  128. }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 })
  129. }.width('100%')
  130. }
  131. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号