鸿蒙开发融云demo消息未读数

鸿蒙开发融云demo消息未读数

跟着我一步步搭建带界面的融云demo，这次是要显示未读数，未读数有两个，一个是消息列表的未读数，一个是主页消息tab上的未读数。

一、消息列表的未读数

先看下效果图：

关键代码如下：

if (this.chatItem.unreadMessageCount > 0 || this.customUnReadCount > 0) { // 红点消息大于0条时渲染红点
        Row() {
          Text(this.chatItem.unreadMessageCount > 0?`${this.chatItem.unreadMessageCount}`:`${this.customUnReadCount}`)
            .borderRadius($r('app.integer.layout_8'))
            .constraintSize({minWidth: $r('app.integer.opt_layout_chat_view_red_dot_width')})
            .height($r('app.integer.opt_layout_chat_view_red_dot_height'))
            .backgroundColor($r('app.color.color_red'))
            .fontSize($r('app.integer.text_font_10'))
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
        }
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Center)
        .borderRadius($r('app.integer.layout_10'))
        .margin({ top: $r('app.integer.layout_minus_8'), left: $r('app.integer.layout_24') })
        .constraintSize({minWidth: $r('app.integer.opt_layout_chat_view_red_dot_container_width')})
        .height($r('app.integer.opt_layout_chat_view_red_dot_container_height'))
        .backgroundColor(Color.White)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .opacity((this.chatItem.unreadMessageCount > 0 || this.customUnReadCount > 0) ? 1 : 0)
        .id('badge')
      }

二、主页消息tab的未读数：

先看下效果图：

关键代码如下：

public static getPrivateUnReadCount(unreadCountCallback: (unreadCount: number) => void) {
    let unreadCount = 0
    let conTypeList = new List<ConversationType>();
    conTypeList.add(ConversationType.Private);

    let isContainBlocked = false;

    IMEngine.getInstance().getUnreadCountByTypes(conTypeList, isContainBlocked)
      .then(result => {
        if (EngineError.Success !== result.code) {
          // 获取未读数失败
          return;
        }
        if (!result.data) {
          // 未读数为 null

          return;
        }
        unreadCount = result.data as number;
        unreadCountCallback(unreadCount )

      });
  }

@Builder
  TabBottom(item: TabItem, index: number) {
    Column() {
      // 发现在TabBottom传值改变不了，就用要显示未读数加上位置判断,用if else显示组件，这样不用算badge的size
      // 规则：字符串’-1‘代表的是红点，其他字符串数字为数字红点
      if ((isNotEmptyString(this.unreadNumHome) && index === 0) ||
        (isNotEmptyString(this.unreadNumMsg) && index === 1) ||
        (isNotEmptyString(this.unreadNumMine) && index === 2)) {
        Badge({
          value: index === 0 ? (this.unreadNumHome === '-1' ? '' : this.unreadNumHome) :
                 index === 1 ? (this.unreadNumMsg === '-1' ? '' : this.unreadNumMsg) :
              (this.unreadNumMine === '-1' ? '' : this.unreadNumMine), // 设置 badge 的显示文本
          position: BadgePosition.RightTop, // 设置 badge 显示在右上角
          style: index === 0 || index === 1 ? { badgeColor: $r('app.color.color_red') } :
            { badgeSize: 9, badgeColor: $r('app.color.color_red') }// 设置 badge 的显示样式,首页和消息不用限制大小，让它自适应
        }) {
          Column() {
            Image(this.selectedIndex === index ? item.imageActivated : item.imageOriginal)
              .height($r('app.float.tab_image_size'))
              .width($r('app.float.tab_image_size'))
          }
          .padding({ left: 10, right: 10, })
        }
        .margin({ top: 5, bottom: 5 })
      } else {
        Column() {
          Image(this.selectedIndex === index ? item.imageActivated : item.imageOriginal)
            .height($r('app.float.tab_image_size'))
            .width($r('app.float.tab_image_size'))
        }
        .padding({ left: 10, right: 10, })
        .margin({ top: 5, bottom: 5 })
      }

      Text(item.title)
        .fontSize($r('app.float.tab_text_font_size'))
        .fontWeight(500)
        .fontColor(this.selectedIndex === index ? $r('app.color.color_main') : Color.White)
        .textAlign(TextAlign.Center)
        .margin({
          bottom: $r('app.float.tab_text_margin_bottom')
        })

    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor($r("app.color.color_black"))
    .onClick(() => {
      this.selectedIndex = index
    })
  }

整个鸿蒙融云demo项目结构图：

有问题或者需要完整源码的私信我