徽章

简单来说 就是右上角显示数字 大于 99 就显示 99+

效果

子组件

• 文本 图片都可以

参数

count

徽章的数字

maxCount

徽章的最大数字

要是超过他 就显示 maxCount++

style

样式

style: {
color:Color.Green,
fontSize:24,
badgeSize:12,
badgeColor: Color.Blue,  // 背景色
fontWeight:FontWeight.Bold, // 加粗
borderColor:Color.Pink, // 边框颜色
borderWidth:2, // 边框宽度
},

position

红点的位置

BadgePosition.RightTop, // 右上角
BadgePosition.Right, // 左边
BadgePosition.Left, // 右边

value

这个就是文字.要是写了就不用再写 count, maxCount 这两个参数

文字要是不写 就是小红点

属性

无

事件

无

示例

@Entry
@Component
struct Basic1 {
    @State badgeCount: number = 95;
    @State value:string = "来消息"
    build() {

        Column({space:20}){
            Row(){
                Badge({
                    count: this.badgeCount,
                    maxCount:10,
                    style: {
                        color:Color.Green,
                        fontSize:24,
                        badgeSize:12,
                        badgeColor: Color.Blue,  // 背景色
                        fontWeight:FontWeight.Bold, // 加粗
                        borderColor:Color.Pink, // 边框颜色
                        borderWidth:2, // 边框宽度
                    },
                    position: BadgePosition.Right,
                }) {
                    Image($r("app.media.startIcon"))
                        .width(50)
                        .height(50)
                }
                .width(55)
            }

            Row(){
                Badge({
                    value:this.value,
                    style: {
                        color:Color.Green,
                        fontSize:24,
                        badgeSize:12,
                        badgeColor: Color.Blue,  // 背景色
                        fontWeight:FontWeight.Bold, // 加粗
                        borderColor:Color.Pink, // 边框颜色
                        borderWidth:2, // 边框宽度
                    },
                    position: BadgePosition.RightTop,
                }) {
                    Image($r("app.media.startIcon"))
                        .width(50)
                        .height(50)
                }
                .width(55)
            }

            Row(){
                Button("点击").type(ButtonType.Normal).onClick(()=>{
                    this.badgeCount +=1;
                })
            }
        }

    }
}