芒果tv网站建设的目标,容桂商城网站建设,山西路桥建设集团网站,国外网站设计参考鸿蒙开发融云demo消息未读数
跟着我一步步搭建带界面的融云demo#xff0c;这次是要显示未读数#xff0c;未读数有两个#xff0c;一个是消息列表的未读数#xff0c;一个是主页消息tab上的未读数。
一、消息列表的未读数
先看下效果图#xff1a; 关键代码如下#…鸿蒙开发融云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 ListConversationType();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项目结构图 有问题或者需要完整源码的私信我
