即时通信 IM Flutter

TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示，如果这些消息类型满足不了您的需求，您可以新增自定义消息类型。
自定义消息
如果基本消息类型不能满足您的需求，您可以根据实际业务需求自定义消息。
下文以发送一条可跳转至浏览器的超文本作为自定义消息为例，帮助您快速了解实现流程。
如下图所示：
﻿
下面我们分步骤讲解使用自定义消息。
展示自定义消息
自定义消息是在 custom_message_widget.dart 中渲染的，消息内容以 String 格式，存储于 customMessage.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. 在 _buildDefaultCustomMessage 方法中对自定义消息的解析，得到 CustomMessage 数据对象，通过 _buildTextLinkMessage 渲染消息。
示例代码如下：
Widget _buildDefaultCustomMessage(
  BuildContext context,
  SemanticColorScheme colorsTheme,
  AtomicLocalizations atomicLocale,
) {
  final customMessageData = message.messageBody?.customMessage;
  final customContent = ChatUtil.jsonData2Dictionary(customMessageData?.data);
  
  // 处理 text_link 类型的自定义消息
  if (customContent != null) {
    final customMessage = CustomMessage.fromJSON(customContent);
    if (customMessage.businessID == 'text_link') {
      return _buildTextLinkMessage(context, colorsTheme, customMessage);
    }
  }
}
 
Widget _buildTextLinkMessage(
  BuildContext context,
  SemanticColorScheme colorsTheme,
  CustomMessage customMessage,
) {
  final text = customMessage.text ?? '';
  final link = customMessage.link ?? '';
﻿
  return Container(
    constraints: BoxConstraints(
      maxWidth: maxWidth * 0.7,
    ),
    padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
    decoration: BoxDecoration(
      color: isSelf ? colorsTheme.buttonColorPrimaryDefault : colorsTheme.bgColorDefault,
      borderRadius: BorderRadius.circular(12),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          text,
          style: TextStyle(
            color: isSelf ? colorsTheme.textColorAntiPrimary : colorsTheme.textColorPrimary,
            fontSize: 14,
            fontWeight: FontWeight.w500,
          ),
        ),
        const SizedBox(height: 8),
        GestureDetector(
          onTap: () => _launchUrl(link),
          child: Text(
            '查看详情',
            style: TextStyle(
              color: isSelf ? colorsTheme.textColorAntiPrimary : colorsTheme.buttonColorPrimaryDefault,
              fontSize: 14,
              fontWeight: FontWeight.w400,
              decoration: TextDecoration.underline,
              decorationColor: isSelf ? colorsTheme.textColorAntiPrimary : colorsTheme.buttonColorPrimaryDefault,
            ),
          ),
        ),
      ],
    ),
  );
}
3. 在 message_utils.dart 中的 getMessageAbstract方法里，对增加的自定义消息类型进行解析，用于生成在会话列表中的文字摘要。
示例代码如下：
static String getMessageAbstract(
    MessageInfo? messageInfo,
    BuildContext context,
    {bool showMergedTitle = false}) {
    switch (messageInfo.messageType) {
      // 省略其他类型消息
      
      // 自定义消息文字摘要
      case MessageType.custom:
        final customMessage = messageInfo.messageBody?.customMessage;
        if (customMessage == null) {
          return localizations.messageTypeCustom;
        }
        // 省略部分代码
        final customInfo = ChatUtil.jsonData2Dictionary(customMessage.data);
        if (customInfo != null) {
          // 省略其他自定义消息解析
          // 解析增加的自定义消息
          if (customInfo['businessID'] == 'text_link') {
            return customInfo['text']?.toString() ?? localizations.messageTypeCustom;
          }
        }
﻿
        return localizations.messageTypeCustom;
      default:
        return '';
    }
}
效果如下：
﻿
发送自定义消息
发送自定义消息基本步骤：创建一条自定义消息，将要发送的内容转成 JSON String 格式放入 data 中，并调用 MessageInputStore 的 sendMessage 接口发送。
示例代码如下：
// 创建 MessageInputStore 对象
MessageInputStore _messageInputStore = MessageInputStore.create(conversationID: widget.conversationID);
// 构造自定义消息
final messageInfo = MessageInfo();
messageInfo.messageType = MessageType.custom;
MessageBody messageBody = MessageBody();
messageBody.customMessage = CustomMessageInfo(
  data: '{"businessID":"text_link","link":"https://cloud.tencent.com/document/product/269/3794","text":"欢迎加入腾讯云IM大家庭！"}',
);
messageInfo.messageBody = messageBody;
// 发送消息
await _messageInputStore.sendMessage(message: messageInfo);
﻿
Flutter

本页目录：

自定义消息

展示自定义消息

发送自定义消息
