鸿蒙OpenHarmony【Badge】信息展示

可以附加在单个组件上用于信息标记的容器组件。
  阐明
  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  子组件

  支持单个子组件。
  阐明
  子组件类型：系统组件和自界说组件，支持渲染控制类型（[if/else]、[ForEach]和[LazyForEach]）。
  接口

  Badge

  Badge(value: BadgeParamWithNumber)
  创建数字标记组件。
  卡片本事： 从API version 9开始，该接口支持在ArkTS卡片中利用。
  元服务API： 从API version 11开始，该接口支持在元服务中利用。
  系统本事： SystemCapability.ArkUI.ArkUI.Full
  参数：
  参数名类型必填阐明value[BadgeParamWithNumber]是数字标记组件参数。  Badge

  Badge(value: BadgeParamWithString)
  根据字符串创建标记组件。
  卡片本事： 从API version 9开始，该接口支持在ArkTS卡片中利用。
  元服务API： 从API version 11开始，该接口支持在元服务中利用。
  系统本事： SystemCapability.ArkUI.ArkUI.Full
  从API version 12开始，该组件显隐时支持scale动效。
  参数：
  参数名类型必填阐明value[BadgeParamWithString]是字符串标记组件参数。  BadgeParam对象阐明

  包罗创建Badge组件的底子参数。
  卡片本事： 从API version 9开始，该接口支持在ArkTS卡片中利用。
  元服务API： 从API version 11开始，该接口支持在元服务中利用。
  系统本事： SystemCapability.ArkUI.ArkUI.Full
  名称类型必填阐明position[BadgePosition][Position10+]否style[BadgeStyle]是Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。  BadgeParamWithNumber对象阐明

  BadgeParamWithNumber继承自[BadgeParam]，具有BadgeParam的全部属性。
  卡片本事： 从API version 9开始，该接口支持在ArkTS卡片中利用。
  元服务API： 从API version 11开始，该接口支持在元服务中利用。
  系统本事： SystemCapability.ArkUI.ArkUI.Full
  名称类型必填阐明countnumber是设置提醒消息数。**阐明：**小于等于0时不显示信息标记。取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。maxCountnumber否最大消息数，超过最大消息时仅显示maxCount+。默认值：99取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。  BadgeParamWithString对象阐明

  BadgeParamWithString继承自[BadgeParam]，具有BadgeParam的全部属性。
  卡片本事： 从API version 9开始，该接口支持在ArkTS卡片中利用。
  元服务API： 从API version 11开始，该接口支持在元服务中利用。
  系统本事： SystemCapability.ArkUI.ArkUI.Full
  名称类型必填阐明valuestring是提示内容的文本字符串。  BadgePosition枚举阐明

  卡片本事： 从API version 9开始，该接口支持在ArkTS卡片中利用。
  元服务API： 从API version 11开始，该接口支持在元服务中利用。
  系统本事： SystemCapability.ArkUI.ArkUI.Full
  名称值阐明RightTop0圆点显示在右上角。Right1圆点显示在右侧纵向居中。Left2圆点显示在左侧纵向居中。  BadgeStyle对象阐明

  卡片本事： 从API version 9开始，该接口支持在ArkTS卡片中利用。
  元服务API： 从API version 11开始，该接口支持在元服务中利用。
  系统本事： SystemCapability.ArkUI.ArkUI.Full
  名称类型必填阐明color[ResourceColor]否文本颜色。默认值：Color.WhitefontSizenumberstring否badgeSizenumberstring否badgeColor[ResourceColor]否Badge的颜色。默认值：Color.RedfontWeight10+number[FontWeight]stringborderColor10+[ResourceColor]否底板描边颜色。默认值：Color.RedborderWidth10+[Length]否底板描边粗细。默认值：1单元：vp**阐明：**不支持设置百分比。  属性

  支持[通用属性]
  变乱

  支持[通用变乱]
  示例

  示例1

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.   }
33.   @Builder itemBuilder(value: string) {
34.     Row() {
35.       Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
36.       Text(value)
37.         .width(177)
38.         .height(21)
39.         .margin({ left: 15, right: 76 })
40.         .textAlign(TextAlign.Start)
41.         .fontColor('#182431')
42.         .fontWeight(500)
43.         .fontSize(16)
44.         .opacity(0.9)
45.       Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
46.     }.width('100%').padding({ left: 12, right: 12 }).height(56)
47.   }
49.   build() {
50.     Column() {
51.       Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
52.       Tabs() {
53.         TabContent()
54.           .tabBar(this.tabBuilder(0))
55.         TabContent()
56.           .tabBar(this.tabBuilder(1))
57.         TabContent()
58.           .tabBar(this.tabBuilder(2))
59.         TabContent()
60.           .tabBar(this.tabBuilder(3))
61.       }
62.       .width(360)
63.       .height(56)
64.       .backgroundColor('#F1F3F5')
66.       Column() {
67.         Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
68.         List({ space: 12 }) {
69.           ListItem() {
70.             Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 })
71.           }
72.           .width('100%')
73.           .height(56)
74.           .backgroundColor('#FFFFFF')
75.           .borderRadius(24)
76.           .align(Alignment.Start)
78.           ListItem() {
79.             Badge({
80.               value: 'New',
81.               position: BadgePosition.Right,
82.               style: { badgeSize: 16, badgeColor: '#FA2A2D' }
83.             }) {
84.               Text('list2').width(27).height(19).fontSize(14).fontColor('#182431')
85.             }.width(49.5).height(19)
86.             .margin({ left: 12 })
87.           }
88.           .width('100%')
89.           .height(56)
90.           .backgroundColor('#FFFFFF')
91.           .borderRadius(24)
92.           .align(Alignment.Start)
93.         }.width(336)
95.         Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
96.         List() {
97.           ListItem() {
98.             this.itemBuilder('list1')
99.           }
101.           ListItem() {
102.             Row() {
103.               Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
104.               Badge({
105.                 count: 1,
106.                 position: BadgePosition.Right,
107.                 style: { badgeSize: 16, badgeColor: '#FA2A2D' }
108.               }) {
109.                 Text('list2')
110.                   .width(177)
111.                   .height(21)
112.                   .textAlign(TextAlign.Start)
113.                   .fontColor('#182431')
114.                   .fontWeight(500)
115.                   .fontSize(16)
116.                   .opacity(0.9)
117.               }.width(240).height(21).margin({ left: 15, right: 11 })
119.               Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
120.             }.width('100%').padding({ left: 12, right: 12 }).height(56)
121.           }
123.           ListItem() {
124.             this.itemBuilder('list3')
125.           }
127.           ListItem() {
128.             this.itemBuilder('list4')
129.           }
130.         }
131.         .width(336)
132.         .height(232)
133.         .backgroundColor('#FFFFFF')
134.         .borderRadius(24)
135.         .padding({ top: 4, bottom: 4 })
136.         .divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 })
137.       }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 })
138.     }.width('100%')
139.   }
140. }

复制代码

  示例2

1. // 该示例实现了Badge组件显隐时缩放
2. @Entry
3. @Component
4. struct Index {
5.   @State badgeCount: number = 1
7.   build() {
8.     Column({ space: 40 }) {
9.       Badge({
10.         count: this.badgeCount,
11.         style: {},
12.         position: BadgePosition.RightTop,
13.       }) {
14.         Image($r("app.media.icon"))
15.         .width(50)
16.         .height(50)
17.       }
18.       .width(55)
19.       Button('count 0').onClick(() => {
20.         this.badgeCount = 0
21.       })
22.       Button('count 1').onClick(() => {
23.         this.badgeCount = 1
24.       })
25.     }
26.     .margin({top: 20})
27.   }
28. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。