跳到主要内容

会话列表自定义

会话列表控制需要展示的会话类型​

SDK 会话列表默认仅支持单聊和群聊两种会话。

最多可以支持 单聊、群聊、系统会话。

可以通过下面的代码配置会话列表展示的会话类型，需要在会话列表展示前设置。

// 读取会话列表当前的配置
let config = RongIM.getInstance().conversationListService().getConversationListConfig()
// 设置会话列表仅展示单聊
config.setSupportedTypes([ConversationType.Private])
// 更新会话列表配置
RongIM.getInstance().conversationListService().setConversationListConfig(config)

会话列表增加长按事件​

开发者可以自行增加会话列表的长按事件

private addConversationListLongClickAction() {
  let action: ItemLongClickAction<Conversation> = {
    // 显示标题
    obtainTitle: (context: Context, data: Conversation): string | Resource => {
      return "自定义长按事件";
    },
    // 长按 item 的点击事件
    onClick: (context: Context, data: Conversation) => {
      promptAction.showToast({ message: "会话列表自定义长按事件" })
    },
    // 过滤条件，true 代表需要显示，false 代表不会显示
    onFilter: (data: Conversation): boolean => {
      // 可以动态配置特定的 Conversation 才显示该长按 item
      return true;
    },
    actionId: 'Conversation_Custom' // 动作 Id，可自定义
  }

  RongIM.getInstance().conversationListService().addConversationItemLongClickAction(action);
}

会话列表头像圆角控制​

会话列表头像默认为矩形，可以修改为圆形，不支持动态切换矩形和圆形，必须在会话列表展示前设置

// 读取会话列表当前的配置
let config = RongIM.getInstance().conversationListService().getConversationListConfig()
// 设置会话列表头像为圆角
config.setConversationAvatarStyle(AvatarStyle.Cycle)
// 更新会话列表配置
RongIM.getInstance().conversationListService().setConversationListConfig(config)

会话列表点击事件​

使用 ConversationListComponent 创建聊天页面时，需要设置 onConversationItemClick 。

SDK 默认未处理点击事件，如未设置 onConversationItemClick 则表现为点击无反应。

@Entry
@Component
export struct ChatListPage {

  build() {
    Column() {
      ConversationListComponent({
        // 实现会话列表的点击事件
        onConversationItemClick: this.onConversationItemClick
      }).layoutWeight(1)
    }.width('100%').height('100%')
  }
  
  private onConversationItemClick(conversation: Conversation, index: number): void {
    // let params = new Conversation()
    // params.conversationType = ConversationType.Private
    // params.targetId = "会话 Id"

    // 参数必须是 Conversation 对象，必须有有效的 conversationType targetId
    router.pushUrl({ url: "pages/ChatPage", params: conversation },);
  }
}

会话列表添加自定义空布局​

IMKit 的 会话列表组件-Component 支持在会话列表中添加和空（Empty）视图。

在构造 ConversationListComponent 时传入 emptyComponent 即可。

@Entry
@Component
export struct ChatListPage {

  build() {
    Column() {
      ConversationListComponent({
        // 实现没有会话的空白页面
        emptyComponent: () => {
          this.emptyBuilder();
        }
      }).layoutWeight(1)
    }.width('100%').height('100%')
  }

  @Builder
  emptyBuilder() {
    Text(`空白页面`).width('95%').fontColor("#FF0000").padding(10)
  }
}

会话列表会话事件​

IMKit 提供了会话列表事件监听器 ConversationListEventListener，可监听保存草稿、会话清除未读数、删除会话、本端或者其他端修改会话的免打扰和置顶状态事件。

export interface ConversationListEventListener {
  /**
   * 当某个会话内产生保存草稿的行为时
   */
  onSaveDraft?: (identifier: ConversationIdentifier, content: string) => void;

  /**
   * 当某个会话清除未读数时
   */
  onClearedUnreadStatus?: (identifier: ConversationIdentifier) => void;

  /**
   * 当批量删除某些会话时
   */
  onRemoveConversation?: (identifierList: List<ConversationIdentifier>) => void;

  /**
   * 当其他端修改会话的免打扰和置顶状态时
   */
  onSyncConversationStatus?: (items: List<ConversationStatusInfo>) => void;

  /**
   * 当本端修改会话的置顶状态时
   */
  onConversationTopStatusChange?: (identifierList: List<ConversationIdentifier>, option: ISetConversationTopOption) => void;

  /**
   * 当本端修改会话的免打扰状态时
   */
  onConversationNotificationLevelChange?: (identifierList: List<ConversationIdentifier>, level: PushNotificationLevel) => void;
}

使用 RongIM 的 addConversationListEventListener 与 removeConversationListEventListener 方法添加或移除监听器。

建议添加监听后，在合适的时机移除，避免内存泄露。如果在页面中监听，建议在aboutToAppear调用，在 aboutToDisappear 移除监听。

let service = RongIM.getInstance().conversationListService();
// 设置监听
service.addConversationListEventListener(conversationListEventListener)
// 移除监听
service.removeConversationListEventListener(conversationListEventListener)
最后于 更新