鴻蒙開發(fā)融云demo消息未讀數(shù)

跟著我一步步搭建帶界面的融云demo，這次是要顯示未讀數(shù)，未讀數(shù)有兩個，一個是消息列表的未讀數(shù)，一個是主頁消息tab上的未讀數(shù)。

一、消息列表的未讀數(shù)

先看下效果圖：

關(guān)鍵代碼如下：

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的未讀數(shù)：

先看下效果圖：

關(guān)鍵代碼如下：

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) {// 獲取未讀數(shù)失敗return;}if (!result.data) {// 未讀數(shù)為 nullreturn;}unreadCount = result.data as number;unreadCountCallback(unreadCount )});}

@BuilderTabBottom(item: TabItem, index: number) {Column() {// 發(fā)現(xiàn)在TabBottom傳值改變不了，就用要顯示未讀數(shù)加上位置判斷,用if else顯示組件，這樣不用算badge的size// 規(guī)則：字符串’-1‘代表的是紅點，其他字符串數(shù)字為數(shù)字紅點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), // 設(shè)置 badge 的顯示文本position: BadgePosition.RightTop, // 設(shè)置 badge 顯示在右上角style: index === 0 || index === 1 ? { badgeColor: $r('app.color.color_red') } :{ badgeSize: 9, badgeColor: $r('app.color.color_red') }// 設(shè)置 badge 的顯示樣式,首頁和消息不用限制大小，讓它自適應(yīng)}) {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項目結(jié)構(gòu)圖：

有問題或者需要完整源碼的私信我