当前位置：首页 > news >正文

鸿蒙开发融云Demo消息列表

news 2024/10/24 13:11:09

鸿蒙开发融云IMKit消息列表

融云鸿蒙版是不带UI的，得自己一步步搭建。融云后期好像也不会出带UI的库，还是早点自己弄吧

一、思路：

IMEngine.getInstance().getConversationListByPage获取

二、效果图：

在这里插入图片描述

三、关键代码：

获取列表数据：

public static loadConversationList(conversationCallback?: (arr: Conversation[]) => void) {let conTypeList = new List<ConversationType>();conTypeList.add(ConversationType.Private);conTypeList.add(ConversationType.System);let option: IGetConversationOption = {time: 0,count: 1000}IMEngine.getInstance().getConversationListByPage(conTypeList, option).then(result => {logContent("congge1", result)if (EngineError.Success !== result.code) {// 获取会话列表失败return;}if (!result.data) {// 会话列表为空conversationCallback?.([])return;}let conList = result.data as List<Conversation>;conversationCallback?.(conList.convertToArray().filter(item => isNotEmptyString(item.objectName)))});}

2.ChatListItemView

@Component
export  struct ChatListItemView {@Prop customUnReadCount:number = 0@State chatItem: Conversation = new Conversation();@State imUserInfo:IMUserInfoDataBean = {}@State content:string = ''nowTimeEventId:number = Date.now()aboutToAppear(): void {if (this.chatItem.targetId){MMKVNoClearUtil.getImUserInfo(this.chatItem.targetId,(result)=>{this.imUserInfo = result})}}build() {RelativeContainer() {Image(this.imUserInfo.localPortrait?this.imUserInfo.localPortrait:this.imUserInfo.portrait).width($r('app.integer.opt_layout_chat_view_profile_picture_width')).height($r('app.integer.opt_layout_chat_view_profile_picture_height')).borderRadius($r('app.integer.opt_layout_chat_view_profile_picture_radius')).alt($r('app.media.ic_default')).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }}).id("figure")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')}Text(this.imUserInfo.name).fontColor($r('app.color.color_black')).fontSize($r('app.integer.opt_layout_chat_view_user_name_font_size')).lineHeight($r('app.integer.layout_22')).font({ weight: 450 }).margin({ top: $r('app.integer.layout_0'), left: $r('app.integer.chat_view_row_height') }).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }}).id('user')if (this.chatItem.lastSentTime > 0){Text(handlerMsgTime(this.chatItem.lastSentTime)).fontSize($r('app.integer.opt_layout_chat_view_item_padding_top')).fontColor($r('app.color.color_aa')).maxLines(1).textAlign(TextAlign.End).margin({ top: $r('app.integer.layout_0'), right: 12 }).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: HorizontalAlign.End }}).id('time')}Text(this.dealContent()).fontColor(!(this.chatItem.objectName === HQVoiceMessageObjectName && !MMKVNoClearUtil.getVoiceMessageReadStatus(this.chatItem.targetId,this.chatItem.lastMessageId))?$r('app.color.color_aa'):$r('app.color.color_red')).fontSize($r('app.integer.text_font_14')).lineHeight($r('app.integer.layout_19')).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).margin({ top: $r('app.integer.layout_24'), left: $r('app.integer.chat_view_row_height'),right:12 }).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start },right:{ anchor: '__container__', align: HorizontalAlign.End }}).id('msg')}.width('100%').height($r('app.integer.opt_layout_chat_view_item_height')).backgroundColor(Color.White).padding({ left: 12, top: $r('app.integer.opt_layout_chat_view_item_padding_top'), bottom: $r('app.integer.opt_layout_chat_view_item_padding_bottom') }).onClick(() => {Router.pushChatDetailPage(this.chatItem.targetId,this.chatItem.conversationType)})}dealContent():string{if (this.chatItem.objectName) {this.content = getString($r('app.string.im_version_error_tip'))switch (this.chatItem.objectName){case TextMessageObjectName:this.content = ImUtils.dealMyTextContent(this.chatItem.content as TextMessage)breakcase ImageMessageObjectName:this.content = '[图片]'breakcase HQVoiceMessageObjectName:this.content = `[语音] ${(this.chatItem.content as HQVoiceMessage).duration}"`breakcase CustomizeGiftMessageObjectName:this.content = (this.chatItem.content as CustomizeGiftMessage).toUserId === MMKVUtil.getCurrentUserId()?getString($r('app.string.gift_send_to_one_tip')):getString($r('app.string.gift_send_one_tip'))break}}return this.content}}