鸿蒙开发融云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 = 0let 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) {// 未读数为 nullreturn;}unreadCount = result.data as number;unreadCountCallback(unreadCount )});}

@BuilderTabBottom(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项目结构图：

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