codecamp

信息标记的容器组件

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

说明

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

子组件

支持单个子组件。

说明

子组件类型：系统组件和自定义组件，支持渲染控制类型（if/else、ForEach和LazyForEach）。

接口

方法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. 

  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.   }
  48. 

  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')
  65. 

  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)
  77. 

  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)
  94. 

  95.         Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
  96.         List() {
  97.           ListItem() {
  98.             this.itemBuilder('list1')
  99.           }
  100. 

  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 })
  118. 

  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.           }
  122. 

  123.           ListItem() {
  124.             this.itemBuilder('list3')
  125.           }
  126. 

  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. }

媒体数据写入
沿垂直方向布局的容器
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

通用事件

通用属性

手势处理

基础组件

容器组件

媒体组件

绘制组件

画布组件

动画

弹窗

生命周期

状态管理

像素

枚举

类型

接口

错误码合集

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }