• UIKit
  • SDK
  • 服务端 API
Chat/
UIKit/
Flutter/
产品特性/
UIKit
  • 产品概述
  • 跑通Demo
  • 安装
    • 集成
    • Only Chat
  • 产品特性
    • 局部搜索
    • 离线推送
    • 在线状态
    • 输入状态
    • 消息已读回执
    • 消息反应
    • 国际化
    • 添加自定义消息
    • 表情和贴纸
  • 定制
    • 修改 UI 主题
    • 设置 UI 样式
  • Changelog
  • 开发指引
  • 控制台指南
    • 创建和升级应用
    • 基本配置
    • 功能配置
    • 账号管理
    • 群组管理
    • 回调配置
  • 产品介绍
    • 消息管理
      • 单聊消息
      • 消息存储
      • 离线推送
      • 群消息
      • 消息格式
    • 账号系统
      • 登陆验证
      • 在线状态管理
    • 群相关
      • 群组系统
      • 群组管理
    • 用户资料和关系链
      • 资料管理
      • 关系链管理
  • 购买指南
    • 计费概述
    • 价格中心
  • 错误码

添加自定义消息

TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示,如果这些消息类型满足不了您的需求,您可以新增自定义消息类型。

自定义消息

如果基本消息类型不能满足您的需求,您可以根据实际业务需求自定义消息。 下文以发送一条可跳转至浏览器的超文本作为自定义消息为例,帮助您快速了解实现流程。
下面我们分步骤讲解使用自定义消息。

展示自定义消息

自定义消息携带的信息,以 String 格式,存储于 V2TimMessage.V2TimCustomElem.data 中。如果需要传递的信息量大,建议使用 JSON 格式。
展示自定义消息基本逻辑:解析时,将 JSON String 解析成 Map,用于实例化一个预定义的类,以该对象内的数据,渲染自定义消息体。
1. 定义一个类,用于自定义消息解析后的结构。并完成一个 fromJSON 的方法,通过 Map 对其实例化。 以上述包含链接及文本的自定义消息格式举例:
class CustomMessage {
// 此处的内容请根据需要自行定义
String? link;
String? text;
String? businessID;

CustomMessage.fromJSON(Map json) {
link = json["link"];
text = json["text"];
businessID = json["businessID"];
}
}
2. 编写一个方法,用于实现对自定义消息的解析,得到一个数据对象。 示例代码如下:
CustomMessage? getCustomMessageData(V2TimCustomElem? customElem) {
try {
if (customElem?.data != null) {
final customMessage = jsonDecode(customElem!.data!);
return CustomMessage.fromJSON(customMessage);
}
return null;
} catch (err) {
return null;
}
}
3. TIMUIKitChat 中,使用 messageItemBuildercustomMessageItemBuilder,渲染自定义消息。 示例代码如下:
messageItemBuilder: MessageItemBuilder(
customMessageItemBuilder: (message, isShowJump, clearJump) {
final CustomMessage customMessage = getCustomMessageData(message.customElem);
if (linkMessage != null) {
final String option1 = linkMessage.link ?? "";
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(linkMessage.text ?? ""),
MarkdownBody(
data: TIM_t_para(
"[查看详情 >>]({{option1}})", "[查看详情 >>]($option1)")(
option1: option1),
styleSheet: MarkdownStyleSheet.fromTheme(ThemeData(
textTheme: const TextTheme(
bodyText2: TextStyle(fontSize: 16.0))))
.copyWith(
a: TextStyle(color: LinkUtils.hexToColor("015fff")),
),
)
],
);
}
}
),

发送自定义消息

发送自定义消息基本步骤:使用 SDK 创建一条自定义消息,将要发送的内容转成 JSON String 格式放入 data 中,并调用 TIMUIKitChatControllersendMessage 接口发送。 此处演示示例以直接通过更多功能面板,创建并发送一条自定义消息为例。
1. 实例化一个消息控制器,并传入 TIMUIKitChat 中。
final TIMUIKitChatController _timuiKitChatController =
TIMUIKitChatController();

return TIMUIKitChat(
controller: _timuiKitChatController,
// ...其他参数
)
2. TIMUIKitChatmorePanelConfig 属性中的 extraAction 数组新增一项,添加自定义消息发送按钮。 更多功能面板的按钮,主要由文本 title 和图片 icon 组成。 示例代码如下:
morePanelConfig: MorePanelConfig(
extraAction: [
MorePanelItem(
id: "customMessage",
title: imt("自定义消息"),
onTap: (c) {
_sendCustomMessage();
},
icon: Container(
height: 64,
width: 64,
margin: const EdgeInsets.only(bottom: 4),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5))),
child: SvgPicture.asset(
"images/custom-msg.svg",
package: 'tencent_cloud_chat_uikit',
height: 64,
width: 64,
),
)
),
// ... 其他更多功能面板按钮
],
// ...其他参数
)
3. 实现上述步骤所需的自定义消息发送方法。 示例:点击消息发送按钮后就可以创建一条自定义消息发送,代码如下:
_sendCustomMessage() async {
// 创建自定义消息,下方的data/desc/extension可由您自行定义内容。
V2TimValueCallback<V2TimMsgCreateInfoResult> createCustomMessageRes =
await TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.createCustomMessage(
data:
'{"businessID":"text_link","link":"https://cloud.tencent.com/document/product/269/3794","text":"欢迎加入腾讯云IM大家庭!","version":4}',
desc: '自定义desc',
extension: '自定义extension',
);
if (createCustomMessageRes.code == 0) {
String? id = createCustomMessageRes.data?.id;
// 发送自定义消息
V2TimValueCallback<V2TimMessage>? sendMessageRes =
await _timuiKitChatController.sendMessage(
messageInfo: createCustomMessageRes.data?.messageInfo);
if (sendMessageRes!.code == 0) {
// 发送成功
sendMessageRes.data?.customElem?.data; //自定义data
sendMessageRes.data?.customElem?.desc; //自定义desc
sendMessageRes.data?.customElem?.extension; //自定义extension
}
}
}