跳到主要内容

会话页面

会话页面即应用程序中的聊天页面，主要由消息列表和输入区两部分组成。IMKit 提供默认的会话页面 Page 类和基于 Component 类实现的会话页面。

  • 基于 Page：IMKit SDK 提供了默认会话页面 ConversationPage。页面包含标题栏、消息列表和输入区域。在会话列表页点击某条会话时，会跳转到对应的会话页面。应用程序可以直接使用 ConversationPage。
  • 基于 Component：您可以在应用 Page 中集成 IMKit 提供的会话 ConversationComponent。
注意

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

会话界面-Page​

会话页面支持基于 Page 类的实现方式，包含标题栏、消息列表和底部工具栏组成。

优点：可以直接使用

缺点：定制化能力弱

提示

默认 ConversationPage 不支持沉浸式状态栏模式，如果应用层设置了沉浸式状态栏模式，建议基于 ConversationComponent 构建会话页面，自行适配沉浸式状态栏模式。

(width=250)

直接跳转​

跳转到 ConversationPage 组件，支持不通过会话列表直接跳转

TypeScript
import('@rongcloud/imkit/src/main/ets/conversation/page/ConversationPage');

// 进入 SDK ConversationPage
// 参数必须是 Conversation 对象，必须有有效的 conversationType targetId
  let params = new Conversation()
  params.conversationType = ConversationType.Private;
  params.targetId = "2";
  params.lastSentTime  = 0;
  router.pushNamedRoute({ name: 'ConversationPage', params: params })

使用 ConversationPage 组件​

TypeScript
import { ConversationIdentifier, ConversationPage, ConversationType } from '@rongcloud/imkit';

/**
 * 自定义会话页面，仅集成了ConversationPage
 */
@Entry
@Component
struct CustomConversationPage {

  build() {
    Column() {
      ConversationPage({
        conId: ConversationIdentifier.createWith2(ConversationType.Private, "会话ID targetId")
      }).layoutWeight(1)
    }.width('100%')
    .height('100%')
  }

}

会话组件-Component​

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

(width=250)

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

缺点：如果您想做自定义的导航栏，需要自己实现。

示例代码​

TypeScript
// 使用 ConversationComponent 自行创建聊天页面

import {
  Conversation,
  ConversationComponent,
  ConversationComponentData,
  ConversationIdentifier,
  RCTitleBar
} from '@rongcloud/imkit';
import { promptAction, router } from '@kit.ArkUI';

@Entry
@Component
export struct ChatPage {
  @State pageShow: boolean = true
  @State isEdit: boolean = false

  @State model: RCTitleBar.Model = new RCTitleBar.Model().setLeftTitleName("返回").setOnLeftClickListener(() => {
    router.back();
  }).setRightTitleName("设置").setOnRightClickListener(() => {
    promptAction.showToast({ message: '点击了设置...' })
  })
  private conId: ConversationIdentifier = new ConversationIdentifier();
  private conversationComponentData: ConversationComponentData | undefined

  aboutToAppear(): void {
    // router 传入下个页面数据类型会丢失
    // 此处虽然 as Conversation ，但本质还是 Object 对象
    // 如果按照 Conversation 对象调用 params 的方法会发生崩溃
    const params = router.getParams() as Conversation;

    if (params && params.conversationType) {
      this.conId.conversationType = params.conversationType;
    }
    if (params && params.targetId) {
      this.conId.targetId = params.targetId;
    }
    this.conversationComponentData = new ConversationComponentData(this.conId)
    // 1.6.0 及以上版本，跳转到指定消息，只传消息的sentTime即可，不需要再传消息Id（内部不再使用此参数），如果不传则滚动到底部。
    // this.conversationComponentData.timestamp = 跳转的消息时间
    
    //  1.6.0 以下版本，则需要传入消息的sentTime 与消息Id，如果不传则滚动到底部。
    // this.conversationComponentData.timestamp = 跳转的消息时间
    // this.conversationComponentData.messageId = 跳转的消息ID
  }

  onPageShow(): void {
    this.pageShow = true;
  }

  onPageHide(): void {
    this.pageShow = false;
  }

  build() {
    Column() {
      RCTitleBar({ model: this.model })
      ConversationComponent({
        // 聊天页面数据，必须指定具体的会话，聊天页面才能加载对应会话的消息
        conversationData: this.conversationComponentData,

        // 聊天页面控制多选功能的是否开启。
        // 传入 true 聊天页面消息开始多选，传入 false 消息关闭多选
        // SDK 内部有多选功能，建议 App 不需要开启多选，只需要在合适的时间关闭（比如 App 多选完消息做某些操作，完成之后可以通过该字段关闭多选）
        isEdit : this.isEdit,
                
        // 聊天页面监听消息长按后底部菜单的更多按钮点击事件。
        onClickMoreAction: (isEdit: boolean) => {
          this.onClickMoreAction(isEdit)
        },

        // 聊天页面组件需要在 onPageShow & onPageHide 做一些业务逻辑，例如设置键盘状态，停止播放语音消息等
        // 而组件是无法直接监听到 onPageShow & onPageHide 事件，所以需要 Page 将该事件传递给聊天页面组件
        pageShow: this.pageShow
      }).layoutWeight(1)
      // layoutWeight 自适应填充剩余空间，可以避免底部的输入框超出屏幕
    }
  }
  
  private onClickMoreAction(isEdit: boolean) : void {
    // 处理逻辑
  }
}
最后于 更新