鸿蒙开发:信息标记组件

前言

本文基于Api13

信息标记,很是常见,比如手机桌面上的各种应用的右上角信息提示,微信的聊天中的消息未读提示等等,可以说非常常见。

手机桌面消息提示:

微信中的消息未读:

如此常见的一个功能,在实际的开发中,我们应该如何来实现呢?

当然了,实现方式具有很多种,比如使用Stack层叠组件,让信息提示组件在最顶层。

TypeScript 复制代码
Stack() {
        Image($r("app.media.startIcon"))
          .width(50)
          .height(50)
        Text("1")
          .width(20)
          .height(20)
          .backgroundColor(Color.Red)
          .borderRadius(20)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }.alignContent(Alignment.TopEnd)

效果如下:

当然了,你也可以使用相对布局RelativeContainer来实现。

TypeScript 复制代码
RelativeContainer() {
        Image($r("app.media.startIcon"))
          .width(50)
          .height(50)
          .alignRules({
            middle: { anchor: "__container__", align: HorizontalAlign.Center },
            center: { anchor: "__container__", align: VerticalAlign.Center }
          })
        Text("1")
          .width(20)
          .height(20)
          .backgroundColor(Color.Red)
          .borderRadius(20)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
          .alignRules({
            right: { anchor: "__container__", align: HorizontalAlign.End }
          })
      }.width(60)
      .height(60)

以上的方式实现,都是最常见的多组件方式来实现,需要自己来去控制信息标记的位置,在鸿蒙开发中,除了以上的方式之外,还非常贴心的给出了信息标记组件Badge来实现。

信息标记组件Badge

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

源码中支持两种参数,一个是根据数字创建标记组件的BadgeParamWithNumber,一个是根据字符串创建标记组件的BadgeParamWithString。

TypeScript 复制代码
 (value: BadgeParamWithNumber): BadgeAttribute;
 (value: BadgeParamWithString): BadgeAttribute;

BadgeParamWithNumber和BadgeParamWithString都是BadgeParam的子类,我们先看下BadgeParam中的属性,有两个属性,一个是position,类型是BadgePosition/Position,主要是设置提示点的显示位置,还有一个是style,类型是BadgeStyle,这是一个必须要传递的参数,主要是设置Badge组件的样式支持设置文本颜色、尺寸、圆点颜色和尺寸。

BadgeParamWithNumber中有两个属性,一个是count,类型是number,是必填的参数,主要作用于设置提醒消息数;还有一个是maxCount,类型是number,主要作用是设置最大消息数。

BadgeParamWithString中只有一个参数,value,类型是string,是一个必填参数,主要是设置提示内容的文本字符串。

BadgePosition

名称 说明
RightTop 0 圆点显示在右上角。
Right 1 圆点显示在右侧纵向居中。
Left 2 圆点显示在左侧纵向居中。

BadgeStyle


名称 类型 必填 说明
color ResourceColor 文本颜色。
fontSize number /string 文本大小。
badgeSize number/string Badge的大小。
badgeColor ResourceColor Badge的颜色。
fontWeight number/FontWeight/string 设置文本的字体粗细。
borderColor ResourceColor 底板描边颜色。
borderWidth Length 底板描边粗细。

实现一个简单的右上角消息标记案例:

TypeScript 复制代码
@Entry
@Component
struct DemoPage {
  @State badgeCount: number = 1

  build() {
    Column() {
      Badge({
        count: this.badgeCount,
        style: {},
        position: BadgePosition.RightTop,
      }) {
        Image($r("app.media.startIcon"))
          .width(50)
          .height(50)
      }
      .width(55)

      Button("清空")
        .margin({ top: 10 })
        .onClick(() => {
          this.badgeCount = 0
        })
      Button("累加")
        .margin({ top: 10 })
        .onClick(() => {
          this.badgeCount += 1
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

当count为0时,就不会显示右上角的信息提示,当然了,你也可以使用value来标记信息组件的内容。

相关总结

使用信息标记组件Badge, 不需要我们在关注位置问题,我们通过position属性进行控制即可,而且针对信息的显示和隐藏,也不用过多的条件判断,可以说是非常的简单。

相关推荐
simple丶39 分钟前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶1 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
mmoyula1 小时前
【RK3568 驱动开发:实现一个最基础的网络设备】
android·linux·驱动开发
万少2 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
sam.li2 小时前
WebView安全实现(一)
android·安全·webview
移动开发者1号3 小时前
Kotlin协程超时控制:深入理解withTimeout与withTimeoutOrNull
android·kotlin
程序员JerrySUN3 小时前
RK3588 Android SDK 实战全解析 —— 架构、原理与开发关键点
android·架构
移动开发者1号3 小时前
Java Phaser:分阶段任务控制的终极武器
android·kotlin
哲科软件12 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
Frank学习路上14 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode