如何设置badge角标动态亮显 HarmonyOS 鸿蒙Next

如何设置badge角标动态亮显 HarmonyOS 鸿蒙Next 如何实现：不要将数字显示出来，根据一个变量控制是否显示小圆点。

6 回复

•

更多关于如何设置badge角标动态亮显 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@Entry @Component struct BadgePage { @State badgeCount: number = 1

build() { Column({ space: 40 }) { if (this.badgeCount == 0) { Image($r(“app.media.startIcon”)) .width(50) .height(50) } else { Badge({ value: ‘’, style: {} }) { Image($r(“app.media.startIcon”)) .width(50) .height(50) } .width(55) }

  Button('count 0').onClick(() => {
    this.badgeCount = 0
  })
  Button('count 1').onClick(() => {
    this.badgeCount = 1
  })
}
.margin({ top: 20 })

} }

拎码了，

当角标设置为右上角时，如果显示999+，角标位移是向右延伸的。这个可以改角标的方向吗？试过offset(x,y)，但这个是把badge包含的子组件也位移了。

这个好像不能设置延伸方向，没看到有设置这个的属性，

在HarmonyOS（鸿蒙Next）中，设置badge角标动态亮显可以通过调用NotificationRequest和NotificationSlot API来实现。首先，创建一个NotificationSlot对象，设置其类型为SOCIAL_COMMUNICATION或其他适用类型。然后，使用NotificationManager的addSlot方法注册该NotificationSlot。

接下来，创建一个NotificationRequest对象，设置其badgeNumber属性为所需的角标数字。通过NotificationManager的publish方法发布该通知，即可在应用图标上动态显示角标。

例如：

import notification from '@ohos.notification';

let slot = {
    type: notification.SlotType.SOCIAL_COMMUNICATION
};
notification.addSlot(slot).then(() => {
    let request = {
        content: {
            contentType: notification.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
            normal: {
                title: '新消息',
                text: '您有一条新消息'
            }
        },
        badgeNumber: 1
    };
    notification.publish(request).then(() => {
        console.log('通知发布成功');
    });
});

此代码段实现了在应用图标上动态显示角标的功能。

回到顶部