腾讯云即时通信IMFlutter_AI解决方案_同尘科技

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

自定义消息

如果基本消息类型不能满足您的需求，您可以根据实际业务需求自定义消息。
下文以发送一条可跳转至浏览器的超文本作为自定义消息为例，帮助您快速了解实现流程。
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 中，使用 messageItemBuilder 内 customMessageItemBuilder，渲染自定义消息。
如示例中默认的自定义消息格式，解析实现后的效果如下：示例代码如下：

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 中，并调用 TIMUIKitChatController 的 sendMessage 接口发送。
此处演示示例以直接通过更多功能面板，创建并发送一条自定义消息为例。1. 实例化一个消息控制器，并传入 TIMUIKitChat 中。

final TIMUIKitChatController _timuiKitChatController =   TIMUIKitChatController();
return TIMUIKitChat(   controller: _timuiKitChatController,   // ...其他参数   )

2. 为 TIMUIKitChat 的 morePanelConfig 属性中的 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 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? 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 }  }}

联系我们

点此进入IM社群，享有专业工程师的支持，解决您的难题

对即时通讯IM解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案