自定义会话列表 provider

会话列表自定义会话展示模板

您可以自定义会话列表模板展示不同类型的会话。

编写自定义展示模版

您需要继承 BaseConversationItemProvider 自定义会话条目展示模版。

示例代码

TypeScript

import { BaseConversationItemProvider, BaseUiConversation } from "@rongcloud/imkit";

export class CustomPrivateConversationItemProvider extends BaseConversationItemProvider {
  public getConversationWrapBuilder(): WrappedBuilder<[Context, BaseUiConversation, number]> {
    return wrapBuilder(bindPrivateConversationMessageData)
  }
}

@Builder
export function bindPrivateConversationMessageData(context: Context, baseConversation: BaseUiConversation, position: number) {
  CustomPrivateConversationItemView({ conversation: baseConversation });
}


@Component
export struct CustomPrivateConversationItemView {
  @ObjectLink conversation: BaseUiConversation;

  build() {
    this.CustomConversationItemComponent(this.conversation);
  }

  @Builder
  CustomConversationItemComponent(baseConversation: BaseUiConversation) {
    // 根据 baseConversation 来渲染UI，下面示范了添加会话头像和会话标题
    // 会话头像
    Image(this.baseConversation.getPortrait()).height(48).width(48)
    // 会话标题
    Text(this.baseConversation.getTitle()).fontColor("#C7CCD4").fontSize(16)
  }
}

绑定自定义会话列表模板

您可以设置 IMKit SDK 内置的指定会话类型的展示模版为您自定义的展示模板，需要在会话列表展示前设置。

TypeScript

let conversationListService = RongIM.getInstance().conversationListService()
conversationListService.addConversationItemProvider(ConversationType.Private, new CustomPrivateConversationItemProvider());

移除指定会话类型展示模版

IMKit SDK 支持移除内置的指定会话类型的展示模版，需要在会话列表展示前设置。

提示

IMKit SDK 如果找不到这个会话类型的展示模版时，会默认返回私聊会话类型的展示模版。

TypeScript

let conversationListService = RongIM.getInstance().conversationListService()
conversationListService.removeConversationItemProvider(ConversationType.Private);