跳到主要内容

会话页面

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

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

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

会话界面-Page​

会话页面一般由标题栏、消息列表和底部工具栏组成。

提示

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

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

(width=250)

优点：可以直接使用

缺点：定制化能力弱

// 进入 SDK ConversationPage
// 参数必须是 Conversation 对象，必须有有效的 conversationType targetId
router.pushNamedRoute({ name: "ConversationPage", params: conversation });

会话组件-Component​

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

(width=250)

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

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

// 使用 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();

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

  }

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

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

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

        // 聊天页面控制多选功能的是否开启。
        // 传入 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 {
    // 处理逻辑
  }
}
最后于 更新