会话列表页面

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

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

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

注意

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

会话列表界面-Page

会话列表页面一般由标题栏和会话列表两部分组成。

提示

IMKit 在默认会话列表页面 ConversationListPage 包含了标题栏的实现。 如果基于 ConversationListComponent 构建会话列表页面，请自行实现标题栏。

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

缺点：定制化能力弱

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

会话列表组件不包含标题栏，需要 App 设置

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

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

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 },);
  }
}