跳到主要内容

会话列表页面

IMKit SDK 会话的产生依赖本地数据库中的消息，会话列表页面展示了当前用户设备上的所有本地会话。一但 SDK 的本地消息数据库生成消息，SDK 就会生成对应的会话，并按照时间倒序排列，置顶会话会排在最前。

提示

如果开启了多设备消息同步，在 换新设备登录 或 应用卸载重装 场景下，离线补偿机制仅可获取到最近（默认离线补偿天数为 1 天，最大 7 天）的单聊、群聊会话消息。早于该天数的会话无法通过离线补偿机制获取。因此，离线补偿后的会话列表可能与原设备上或卸载前的会话列表并不一致（您可能会有丢失部分会话的错觉）。

IMKit 提供基于 Page 类和基于 Component 类实现的会话列表页面。

  • 基于 Page：IMKit SDK 默认提供的会话列表 ConversationListPage。页面支持一个标题栏和一个会话列表。
  • 基于 Component：您可以在应用 Page 中集成 IMKit 提供的会话列表 ConversationListComponent ，即自定义会话列表 Page。
注意

Android 的 Activity 或 Fragment 可以被继承，但是鸿蒙的 Page 或者 Component 都无法被继承。

会话列表界面-Page​

会话列表页面支持基于 Page 类的实现方式，包含标题栏和会话列表两部分组。

优点：可以直接使用，点击跳转聊天页面已经完成

缺点：定制化能力弱

(width=250)

示例代码​

TypeScript
import { ConversationListPage } from '@rongcloud/imkit'
import promptAction from '@ohos.promptAction'

@Entry
@Component
export struct MainPage {
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {

        TabContent() {
          Column() {
            // 直接使用 SDK 内置的会话列表页面
            // SDK 有内置的导航，可以自定义导航的左侧、中间、右侧组件
            ConversationListPage({
              customLeftView: this.customLeftView(),
              customCenterView: this.customCenterView(),
              customRightView: this.customRightView()
            })
          }
        }.tabBar("会话列表-页面")
      }
    }
  }

  // 导航栏自定义左侧组件（可选）
  @Builder
  private customLeftView() {
    Text("左侧标题").onClick(() => {
      promptAction.showToast({message : "点击了左侧标题"})
    }).layoutWeight(1)
  }

  // 导航栏自定义中间组件（可选）
  @Builder
  private customCenterView() {
    Text("中间标题").onClick(() => {
      promptAction.showToast({message : "点击了中间标题"})
    }).layoutWeight(1).textAlign(TextAlign.Center)
  }

  // 导航栏自定义右侧组件（可选）
  @Builder
  private customRightView() {
    Text("右侧标题").onClick(() => {
      promptAction.showToast({message : "点击了右侧标题"})
    }).layoutWeight(1).textAlign(TextAlign.End)
  }
}

会话列表组件-Component​

会话列表页面支持基于 Component 类的实现方式，此方式需要自行实现标题栏。

优点：定制化容易。整个 Page 可以开发者自己构建，只需要把会话列表组件嵌入到开发者自己的 Page 中

缺点：如果开发者想做自定义的导航栏，需要自己实现。每个会话的点击事件需要 App 处理

(width=250)

示例代码​

TypeScript
import { Conversation, ConversationListComponent, RCTitleBar } from '@rongcloud/imkit'
import { router } from '@kit.ArkUI'

@Entry
@Component
export struct ChatListPage {
  @State model: RCTitleBar.Model = new RCTitleBar.Model().setTitleName("会话列表").setLeftIcon(null)

  build() {
    Column() {
      RCTitleBar({
        model: this.model
      })
      ConversationListComponent({
        // 实现会话列表的点击事件
        onConversationItemClick: this.onConversationItemClick,
        // 实现没有会话的空白页面
        emptyComponent: () => {
          this.emptyBuilder();
        }
      }).layoutWeight(1)
    }.width('100%').height('100%')
  }

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

  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 },);
  }
}
提示
  • SDK 默认未处理点击事件，设置会话列表点击事件具体参考会话列表事件。
最后于 更新