消息气泡

消息点击事件

您可以通过调用 addMessageClickListener 方法监听消息的点击事件。消息点击监听 MessageClickListener 的所有方法均为可选方法，可以按需实现。

提示

从 1.4.3 版本开始，onMessageClick 支持语音消息。
从 1.4.3 版本开始，所有方法均增加 Context、ClickEvent/GestureEvent 参数。

警告

为了避免内存泄漏，请将监听保存，在必要的时候移除。

接口定义

TypeScript
/**
 * 增加消息点击事件监听
 * @param listener 监听
 * @warning addMessageClickListener & removeMessageClickListener 配合使用，避免内存泄露
 * @discussion 重复 add 同一个 Listener 对象，只有第一个 Listener 会被 add
 */
addMessageClickListener(listener: MessageClickListener): void;

参数说明

MessageClickListener

方法名	参数	返回值	说明	支持版本
`onMessagePortraitClick`	`message: Message` `userId: string` `context?: Context` `event?: ClickEvent`	`boolean`	消息头像点击事件。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	1.4.3+
`onMessagePortraitLongClick`	`message: Message` `user: UserInfoModel` `context?: Context` `event?: GestureEvent`	`boolean`	消息头像长按事件。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	1.4.3+
`onMessageClick`	`message: Message` `context?: Context` `event?: ClickEvent`	`boolean`	消息点击事件。从 `1.4.3` 版本开始支持语音消息。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	1.4.3+
`onMessageLongClick`	`message: Message` `context?: Context` `event?: GestureEvent`	`boolean`	消息长按事件。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	1.4.3+
`onMessageRecallEditClick`	`message: Message` `context?: Context` `event?: ClickEvent`	`boolean`	消息撤回编辑事件。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	1.4.3+
`onMessageLinkClick`	`message: Message` `url: string` `context?: Context` `event?: ClickEvent`	`boolean`	文本消息超链接点击事件。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	1.4.3+
`onMessageEmailClick`	`message: Message` `email: string` `context?: Context` `event?: ClickEvent`	`boolean`	文本消息 Email 点击事件。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	1.4.3+
`onMessagePhoneClick`	`message: Message` `phone: string` `context?: Context` `event?: ClickEvent`	`boolean`	文本消息手机号点击事件。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	1.4.3+
`onMessageRightClick`	`message: Message` `context?: Context` `event?: MouseEvent`	`boolean`	鼠标右键点击消息事件。返回 `true` 表示 App 处理该事件，SDK 不再处理；返回 `false` 表示由 SDK 处理	25.12.0+

示例代码

TypeScript
let msgClickListener: MessageClickListener = {
  onMessagePortraitClick: (message: Message, userId: string, context?: Context, event?: ClickEvent) => {
    // 消息头像点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessagePortraitLongClick: (message: Message, user: UserInfoModel, context?: Context, event?: GestureEvent) => {
    // 消息头像长按事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageClick: (message: Message, context?: Context, event?: ClickEvent) => {
    // 消息点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageLongClick: (message: Message, context?: Context, event?: GestureEvent) => {
    // 消息长按事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageRecallEditClick: (message: Message, context?: Context, event?: ClickEvent) => {
    // 消息撤回编辑事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageLinkClick: (message: Message, url: string, context?: Context, event?: ClickEvent) => {
    // 文本消息超链接点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessageEmailClick: (message: Message, email: string, context?: Context, event?: ClickEvent) => {
    // 文本消息 Email 点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
  onMessagePhoneClick: (message: Message, phone: string, context?: Context, event?: ClickEvent) => {
    // 文本消息手机号点击事件
    // true 由 App 处理该事件，SDK 不再处理。false 由 SDK 处理
    return false;
  },
}
RongIM.getInstance().conversationService().addMessageClickListener(msgClickListener);

修改消息气泡的 UI 配置

IMKit 从 1.4.3 版本开始支持通过 setConversationConfig 方法传入对应的 ConversationConfig 对象修改消息气泡的 UI 配置。支持设置的属性：边框圆角大小、边框色、背景色。

提示

仅支持初始化前的配置，若初始化后开发者设置，则不会生效。

修改边框圆角大小

边框圆角大小支持按消息方向来设置：

设置/获取接收的消息气泡边框圆角大小：setReceivedMessageBorderRadius、getReceivedMessageBorderRadius
设置/获取发送的消息气泡边框圆角大小：setSentMessageBorderRadius、getSentMessageBorderRadius

接口定义

TypeScript
/**
 * 设置接收的消息气泡边框圆角大小
 */
setReceivedMessageBorderRadius(borderRadius: BorderRadiuses): void

/**
 * 获取接收的消息气泡边框圆角大小
 */
getReceivedMessageBorderRadius(): BorderRadiuses

/**
 * 设置发送的消息气泡边框圆角大小
 */
setSentMessageBorderRadius(borderRadius: BorderRadiuses): void

/**
 * 获取发送的消息气泡边框圆角大小
 */
getSentMessageBorderRadius(): BorderRadiuses

参数说明

BorderRadiuses

参数名	类型	必填	说明
`topLeft`	`number`	是	左上角圆角大小，单位为 vp
`topRight`	`number`	是	右上角圆角大小，单位为 vp
`bottomLeft`	`number`	是	左下角圆角大小，单位为 vp
`bottomRight`	`number`	是	右下角圆角大小，单位为 vp

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
let receivedMessageBorderRadius: BorderRadiuses = {
  topLeft: 4,
  topRight: 8,
  bottomLeft: 8,
  bottomRight: 8
}
config.setReceivedMessageBorderRadius(receivedMessageBorderRadius);
RongIM.getInstance().conversationService().setConversationConfig(config);

修改边框色

边框色支持按消息方向来设置：

设置/获取接收的消息气泡边框色：setReceivedMessageBorderColor、getReceivedMessageBorderColor
设置/获取发送的消息气泡边框色：setSentMessageBorderColor、getSentMessageBorderColor

接口定义

TypeScript
/**
 * 设置接收的消息气泡边框色
 * @param objectName 消息类型的 objectName，为空字符串表示所有消息类型
 * @param color 边框颜色
 */
setReceivedMessageBorderColor(objectName: string, color: Color): void

/**
 * 获取接收的消息气泡边框色
 * @param objectName 消息类型的 objectName
 */
getReceivedMessageBorderColor(objectName: string): Color

/**
 * 设置发送的消息气泡边框色
 * @param objectName 消息类型的 objectName，为空字符串表示所有消息类型
 * @param color 边框颜色
 */
setSentMessageBorderColor(objectName: string, color: Color): void

/**
 * 获取发送的消息气泡边框色
 * @param objectName 消息类型的 objectName
 */
getSentMessageBorderColor(objectName: string): Color

参数说明

参数名	类型	必填	说明
`objectName`	`string`	是	消息类型的 objectName。为空字符串 `""` 表示所有消息类型；指定具体值（如 `"RC:TxtMsg"`）表示仅针对该消息类型
`color`	`Color`	是	边框颜色

使用示例

示例 1：修改特定消息类型的边框色

通过指定消息的 objectName 仅修改文本消息类型的边框色为灰色，其他消息类型不修改：

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBorderColor("RC:TxtMsg", Color.Gray);
RongIM.getInstance().conversationService().setConversationConfig(config);

示例 2：修改所有消息类型的边框色

修改全部消息类型的边框色为灰色：

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBorderColor("", Color.Gray);
RongIM.getInstance().conversationService().setConversationConfig(config);

示例 3：组合配置

通过指定消息的 objectName 仅修改文本消息类型的边框色为灰色，同时修改其余消息类型的边框色为蓝色，与接口调用顺序无关：

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBorderColor("RC:TxtMsg", Color.Gray);
config.setReceivedMessageBorderColor("", Color.Blue);
RongIM.getInstance().conversationService().setConversationConfig(config);

修改背景色

背景色支持按消息方向来设置：

设置/获取接收的消息气泡背景色：setReceivedMessageBackgroundColor、getReceivedMessageBackgroundColor
设置/获取发送的消息气泡背景色：setSentMessageBackgroundColor、getSentMessageBackgroundColor

接口定义

TypeScript
/**
 * 设置接收的消息气泡背景色
 * @param objectName 消息类型的 objectName，为空字符串表示所有消息类型
 * @param color 背景颜色
 */
setReceivedMessageBackgroundColor(objectName: string, color: Color): void

/**
 * 获取接收的消息气泡背景色
 * @param objectName 消息类型的 objectName
 */
getReceivedMessageBackgroundColor(objectName: string): Color

/**
 * 设置发送的消息气泡背景色
 * @param objectName 消息类型的 objectName，为空字符串表示所有消息类型
 * @param color 背景颜色
 */
setSentMessageBackgroundColor(objectName: string, color: Color): void

/**
 * 获取发送的消息气泡背景色
 * @param objectName 消息类型的 objectName
 */
getSentMessageBackgroundColor(objectName: string): Color

参数说明

参数名	类型	必填	说明
`objectName`	`string`	是	消息类型的 objectName。为空字符串 `""` 表示所有消息类型；指定具体值（如 `"RC:TxtMsg"`）表示仅针对该消息类型
`color`	`Color`	是	背景颜色

使用示例

示例 1：修改特定消息类型的背景色

通过指定消息的 objectName 仅修改文本消息类型的背景色为灰色，其他消息类型不修改：

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBackgroundColor("RC:TxtMsg", Color.Gray);
RongIM.getInstance().conversationService().setConversationConfig(config);

示例 2：修改所有消息类型的背景色

修改全部消息类型的背景色为灰色：

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBackgroundColor("", Color.Gray);
RongIM.getInstance().conversationService().setConversationConfig(config);

示例 3：组合配置

通过指定消息的 objectName 仅修改文本消息类型的背景色为灰色，同时修改其余消息类型的背景色为蓝色，与接口调用顺序无关：

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setReceivedMessageBackgroundColor("RC:TxtMsg", Color.Gray);
config.setReceivedMessageBackgroundColor("", Color.Blue);
RongIM.getInstance().conversationService().setConversationConfig(config);

自定义消息气泡子组件

IMKit 从 1.10.0 版本开始支持通过 setMessageBubbleComponentConfig 方法传入对应的 componentConfig 对象修改消息气泡的部分子组件。

接口定义

TypeScript
setMessageBubbleComponentConfig(componentConfig: MessageBubbleComponentConfig): void

参数说明

MessageBubbleComponentConfig

参数名	类型	必填	说明	支持版本
`identifier`	`ComponentIdentifier`	是	组件标识，指定要自定义的组件类型。详见下方"支持的组件类型"	1.10.0
`component`	`WrappedBuilder<MessageBubbleComponentData>`	否	自定义组件构建器，用于构建自定义 UI 组件	1.6.0

MessageBubbleComponentData

参数名	类型	说明	支持版本
`context`	`Context`	应用上下文对象	1.10.0
`uiMessage`	`UiMessage`	消息对象，包含消息的详细数据	1.10.0
`avatarConfig`	`AvatarConfig`	头像配置信息，包含头像尺寸等属性	1.10.0

支持的组件类型

identifier 支持的组件类型说明：

组件类型	说明	支持版本
`MessageBubbleNicknameSuffix`	消息气泡中昵称后缀组件	1.10.0
`MessageBubbleAvatar`	消息气泡中头像组件	1.10.0

使用示例

示例 1：自定义消息气泡中的后缀组件

TypeScript
@Builder
export function buildNicknameSuffixComponent(data: MessageBubbleComponentData) {
  if (data.uiMessage?.message.conversationType === ConversationType.Group) {
    Image($r('app.media.app_icon')).width(15).height(15).margin({left: 5, bottom: 4})
  }
}
const messageBubbleComponentConfig: MessageBubbleComponentConfig = {
  identifier: ComponentIdentifier.MessageBubbleNicknameSuffix,
  component: wrapBuilder(buildNicknameSuffixComponent)
}
RongIM.getInstance().conversationService().setMessageBubbleComponentConfig(messageBubbleComponentConfig)

示例 2：自定义消息气泡中头像组件

TypeScript
@Builder
export function buildCustomMessageAvatar(data: MessageBubbleComponentData) {
  Stack({ alignContent: Alignment.Center }) {
    // 按需获取内置默认头像组件
    RongIM.getInstance().uiComponents().getDefaultMessageAvatar().builder(data)
    Image($r('app.media.avatar_frame_sample'))
      .width(data.avatarConfig?.size)
      .height(data.avatarConfig?.size)
      .objectFit(ImageFit.Contain)
      .hitTestBehavior(HitTestMode.Transparent)
  }
}
let messageBubbleAvatarComponentConfig: MessageBubbleComponentConfig = {
  identifier: ComponentIdentifier.MessageBubbleAvatar,
  component: wrapBuilder(buildCustomMessageAvatar),
}
RongIM.getInstance().conversationService().setMessageBubbleComponentConfig(messageBubbleAvatarComponentConfig)

消息头像圆角控制

您可以通过全局配置控制消息头像圆角展示，需要在会话页面展示前设置。

接口定义

TypeScript
setMessageAvatarStyle(style: AvatarStyle): void

参数说明

参数名	类型	必填	说明
`style`	`AvatarStyle`	是	头像样式。可选值：`AvatarStyle.Cycle`（圆形）、`AvatarStyle.Rectangle`（矩形）

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig();
config.setMessageAvatarStyle(AvatarStyle.Cycle);
RongIM.getInstance().conversationService().setConversationConfig(config);

文本消息字体高亮颜色

IMKit 默认允许配置 SDK 内置文本消息中的 URL、手机号、@ 信息等高亮字体颜色，默认黑色。您可以通过全局配置调整，需要在会话页面展示前设置。

接口定义

TypeScript
setStyleFontColor(color): void

参数说明

参数名	类型	必填	说明
`color`	颜色值	是	高亮字体颜色，如 `Color.Blue`

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setStyleFontColor(Color.Blue)
RongIM.getInstance().conversationService().setConversationConfig(config)

文本和引用消息内容自定义渲染

从 1.6.0 版本开始，IMKit 支持配置 SDK 内置文本、引用消息的文本内容渲染拦截事件接口。您可以通过全局配置调整，需要在会话页面展示前设置。

注意

该接口如果返回 true，那么文本消息字体高亮颜色则不会生效。

接口定义

TypeScript
setMessageRenderTextInterceptor(interceptor: (controller: TextController, content: string) => boolean): void

参数说明

拦截器函数

参数名	类型	说明
`controller`	`TextController`	文本控制器对象，用于设置样式化字符串
`content`	`string`	消息的文本内容
返回值	`boolean`	返回 `true` 表示拦截并使用自定义渲染，返回 `false` 表示不拦截，使用默认渲染

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
let interceptor = (controller: TextController, content: string) => {
  if ("不需要拦截的场景") {
    return false
  }
  let styledString: MutableStyledString = new MutableStyledString(content)
  // 内容匹配到 regContent 则变成红色高亮
  let regContent = "融云"
  let matches = content.matchAll(new RegExp(regContent, 'g'));
  // 是否匹配到内容
  let hasMatch = false
  for (let match of matches) {
    hasMatch = true
    const index = match.index
    if (index != undefined) {
      styledString.setStyle({
        start: index,
        length: regContent.length,
        styledKey: StyledStringKey.FONT,
        styledValue: new TextStyle({ fontColor: Color.Red })
      })
    }
  }
  controller.setStyledString(styledString)
  return true
}
config.setMessageRenderTextInterceptor(interceptor)
RongIM.getInstance().conversationService().setConversationConfig(config)

设置文件消息的文件类型图标

IMKit 默认允许配置 SDK 内置文件消息的文件类型图标。您可以通过全局配置调整，需要在会话页面展示前设置。

设置文件消息的文件类型图标

您可以通过 setFileMessageIcons 覆盖默认的文件消息的文件类型图标。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
//设置图片
let iconsMap: Map<string, Resource> = new Map<string, Resource>();
//覆盖SDK默认图片
iconsMap.set('doc', $r("app.media.doc_icon"));
iconsMap.set('mp3', $r("app.media.mp3_icon"));
iconsMap.set('pdf', $r("app.media.pdf_icon"));
iconsMap.set('rmvb', $r("app.media.rmvb_icon"));
iconsMap.set('default', $r("app.media.rc_default_icon"));
config.setFileMessageIcons(iconsMap);
RongIM.getInstance().conversationService().setConversationConfig(config)

获取文件消息内的文件类型图标 map

您可以通过 getFileMessageIcons 获取文件消息内的文件类型图标 map。

示例代码

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.getFileMessageIcons();

可以通过 getFileMessageIcon 获取文件消息内的文件类型图标，如果找不到，返回 SDK 内置的默认图标。

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.getFileMessageIcon('doc');

引用消息点击跳转行为配置

从 1.6.0 版本开始，IMKit 默认允许配置 SDK 内置引用消息的引用消息点击跳转行为。您可以通过全局配置调整，需要在会话页面展示前设置。

SDK 配置默认为 JumpToDetailPage。

TypeScript
let config = RongIM.getInstance().conversationService().getConversationConfig()
config.setReferencedMessageClickType(ReferencedMessageClickType.ScrollToReferencedMessage)
RongIM.getInstance().conversationService().setConversationConfig(config)

ReferencedMessageClickType 说明

TypeScript
// 引用消息的被引用消息体点击后的处理方式
export enum ReferencedMessageClickType {
  /**
   * 跳转到预览页面。
   */
  JumpToDetailPage,
  /**
   * 滚动到被引用消息，如果被引用消息在本地数据库中不存在，则不会进行跳转，并提示"未找到被引用消息"
   */
  ScrollToReferencedMessage
}

IMLib

IMKit

Global IM UIKit

推送服务

IMLib

IMKit

Global IM UIKit

CallLib

CallKit

CallPlus

RTCLib

CallLib

CallPlus

RTCLib

IM 服务端

IM Server SDK

RTC 服务端

北极星数据查询

消息点击事件​

接口定义​

参数说明​

示例代码​

修改消息气泡的 UI 配置​

修改边框圆角大小​

接口定义​

参数说明​

示例代码​

修改边框色​

接口定义​

参数说明​

使用示例​

示例 1：修改特定消息类型的边框色​

示例 2：修改所有消息类型的边框色​

示例 3：组合配置​

修改背景色​

接口定义​

参数说明​

使用示例​

示例 1：修改特定消息类型的背景色​

示例 2：修改所有消息类型的背景色​

示例 3：组合配置​

自定义消息气泡子组件​

接口定义​

参数说明​

支持的组件类型​

使用示例​

示例 1：自定义消息气泡中的后缀组件​

示例 2：自定义消息气泡中头像组件​

消息头像圆角控制​

接口定义​

参数说明​

示例代码​

文本消息字体高亮颜色​

接口定义​

参数说明​

示例代码​

文本和引用消息内容自定义渲染​

接口定义​

参数说明​

示例代码​

设置文件消息的文件类型图标​

设置文件消息的文件类型图标​

示例代码​

获取文件消息内的文件类型图标 map​

示例代码​

引用消息点击跳转行为配置​

消息点击事件

接口定义

参数说明

示例代码

修改消息气泡的 UI 配置

修改边框圆角大小

接口定义

参数说明

示例代码

修改边框色

接口定义

参数说明

使用示例

示例 1：修改特定消息类型的边框色

示例 2：修改所有消息类型的边框色

示例 3：组合配置

修改背景色

接口定义

参数说明

使用示例

示例 1：修改特定消息类型的背景色

示例 2：修改所有消息类型的背景色

示例 3：组合配置

自定义消息气泡子组件

接口定义

参数说明

支持的组件类型

使用示例

示例 1：自定义消息气泡中的后缀组件

示例 2：自定义消息气泡中头像组件

消息头像圆角控制

接口定义

参数说明

示例代码

文本消息字体高亮颜色

接口定义

参数说明

示例代码

文本和引用消息内容自定义渲染

接口定义

参数说明

示例代码

设置文件消息的文件类型图标

设置文件消息的文件类型图标

示例代码

获取文件消息内的文件类型图标 map

示例代码

引用消息点击跳转行为配置