华为仓颉鸿蒙HarmonyOS NEXT原生UI 容器组件Badge（微信/QQ未读数小红点）

微信和QQ的小红点强迫症看到这个就想点，看看仓颉鸿蒙HarmonyOS NEXT是怎么开发出来的吧！

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

说明

Badge暂不支持混合页面场景。

子组件

支持单个子组件。

构造函数

init(BadgeParams, () -> Unit)

public init(value: BadgeParams, child: () -> Unit)

创建数字标记组件。

参数名	参数类型	必填	默认值	描述
value	BadgeParams	是	-	数字标记组件参数。
child	() -> Unit	是		容器的子组件。

枚举说明

BadgePosition

枚举值	描述
RightTop	圆点显示在右上角。
Right	圆点显示在右侧纵向居中。
Left	圆点显示在左侧纵向居中。

自定义类型说明

BadgeParams

public struct BadgeParams {
        public init(count!: Int32, style!: BadgeStyle, position!: BadgePosition, maxCount!: Int32)
        public init(value!: String, style!: BadgeStyle, position!: BadgePosition)
    }

构造函数

init(Int32, BadgeStyle, BadgePosition, Int32)

public init(count!: Int32, style!: BadgeStyle, position!: BadgePosition, maxCount!: Int32)

创建一个BadgeParams对象。

参数名	参数类型	必填	默认值	描述
count	Int32	是	-	提示内容的文本字符串。
style	BadgeStyle	是	-	Badge组件可设置的样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。
position	BadgePosition	否	BadgePosition.RightTop	提示点显示位置。
maxCount	Int32	否	99	最大消息数，超过最大消息时仅显示 maxCount+。

init(String, BadgeStyle, BadgePosition, Int32)

public init(value!: String, style!: BadgeStyle, position!: BadgePosition)

创建一个BadgeParams对象。

参数名	参数类型	必填	默认值	描述
value	String	是	-	提示内容的文本字符串。
style	BadgeStyle	是	-	Badge组件可设置的样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。
position	BadgePosition	否	BadgePosition.RightTop	提示点显示位置。

BadgeStyle

public struct BadgeStyle {
        public init(color!: Color, fontSize!: Int64, badgeSize!: Int64, badgeColor!: Color)
        public init(color!: Color, fontSize!: Int64, badgeSize!: Int64, badgeColor!: CJResource)
        public init(color!: CJResource, fontSize!: Int64, badgeSize!: Int64, badgeColor!: Color)
        public init(color!: CJResource, fontSize!: Int64, badgeSize!: Int64, badgeColor!: CJResource)
    }

构造函数

init(Color, Int64, Int64, Color)

public init(color!: Color, fontSize!: Int64, badgeSize!: Int64, badgeColor!: Color)

创建一个BadgeStyle对象。

参数名	参数类型	必填	默认值	描述
color	Color	否	Color.WHITE	文本颜色。
fontSize	Int64	否	10	文本大小。单位为 fp。
badgeSize	Int64	否	16	badge的大小。单位为 fp。
badgeColor	Color	否	Color.RED	badge的颜色。

init(Color, Int64, Int64, CJResource)

public init(color!: Color, fontSize!: Int64, badgeSize!: Int64, badgeColor!: CJResource)

创建一个BadgeStyle对象。

参数名	参数类型	必填	默认值	描述
color	Color	否	Color.WHITE	文本颜色。
fontSize	Int64	否	10	文本大小。单位为 fp。
badgeSize	Int64	否	16	badge的大小。单位为 fp。
badgeColor	CJResource	是	-	badge的颜色。

init(CJResource, Int64, Int64, Color)

public init(color!: CJResource, fontSize!: Int64, badgeSize!: Int64, badgeColor!: Color)

创建一个BadgeStyle对象。

参数名	参数类型	必填	默认值	描述
color	CJResource	否	-	文本颜色。
fontSize	Int64	否	10	文本大小。单位为 fp。
badgeSize	Int64	否	16	badge的大小。单位为 fp。
badgeColor	Color	是	Color.RED	badge的颜色。

init(CJResource, Int64, Int64, CJResource)

public init(color!: CJResource, fontSize!: Int64, badgeSize!: Int64, badgeColor!: CJResource)

创建一个BadgeStyle对象。

参数名	参数类型	必填	默认值	描述
color	CJResource	否	-	文本颜色。
fontSize	Int64	否	10	文本大小。单位为 fp。
badgeSize	Int64	否	16	badge的大小。单位为 fp。
badgeColor	CJResource	是	-	badge的颜色。

通用属性/通用事件

通用属性：除文本样式外，其余全部支持

通用事件：不支持

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    
    @Entry
    @Component
    class MyView {
        func build() {
            Column() {
                Text("numberBadge")
                .width(80.percent)
                Row(10) {
                    // 数字上标，maxCount默认99,超过99展示99+
                    Badge(
                        BadgeParams(count: 1,
                            style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 16, badgeSize: 20, badgeColor: Color.RED),
                            position: BadgePosition.RightTop,
                            maxCount: 99)
                    ) {
                        Button("message")
                        .width(100)
                        .height(50)
                        .backgroundColor(0x317aff)
                    }
                    .width(100)
                    .height(50)
    
                    Badge(
                        BadgeParams(count: 1,
                            style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 16, badgeSize: 20, badgeColor: Color.RED),
                            position: BadgePosition.Left,
                            maxCount: 99)
                    ) {
                        Button("message")
                        .width(100)
                        .height(50)
                        .backgroundColor(0x317aff)
                    }
                    .width(100)
                    .height(50)
    
                    // 数字上标
                    Badge(
                        BadgeParams(count: 1,
                            style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 16, badgeSize: 20, badgeColor: Color.RED),
                            position: BadgePosition.Right,
                            maxCount: 99)
    
                    ) {
                        Button("message")
                        .width(100)
                        .height(50)
                        .backgroundColor(0x317aff)
                    }
                    .width(100)
                    .height(50)
                }
                .margin(10)
    
                Text("stringBadge")
                .width(80.percent)
                Row(30) {
                    Badge(
                        BadgeParams(value: "new",
                            style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 9, badgeSize: 20, badgeColor: Color.BLUE)
                        )
                    ) {
                        Text("message")
                        .width(80)
                        .height(50)
                        .fontSize(16)
                        .lineHeight(37)
                        .borderRadius(10)
                        .textAlign(TextAlign.Center)
                        .backgroundColor(0xF3F4ED)
                    }
                    .width(80)
                    .height(50)
    
                    // value为空，设置圆点标记
                    Badge(
                        BadgeParams(value: "",
                            style: BadgeStyle(badgeSize: 6, badgeColor: Color.BLUE),
                            position: BadgePosition.Right
                        )
                    ) {
                        Text("message")
                        .width(90)
                        .height(50)
                        .fontSize(16)
                        .lineHeight(37)
                        .borderRadius(10)
                        .textAlign(TextAlign.Center)
                        .backgroundColor(0xF3F4ED)
                    }
                    .width(90)
                    .height(50)
                }
                .margin(10)
            }
        }
    }

如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191”备注cangjie