Flutter腾讯云聊天消息插件tencent_cloud_chat_message的使用

Flutter腾讯云聊天消息插件tencent_cloud_chat_message的使用

欢迎来到腾讯云聊天UI工具包中的消息组件。该组件旨在为您的聊天应用程序增加全面的消息体验，提供基本和高级聊天功能。

消息组件由几个关键元素组成，包括用于显示对话信息的头部、用于展示消息历史的消息列表视图，以及用于发送消息的消息输入区域。为了提升用户体验，它包含丰富的动画和交互细节。

在基础层面，该组件提供了发送、接收、复制、转发、预览和删除消息等基本聊天功能，确保流畅的聊天体验。

为了满足不同用户需求，它还包括一些高级功能，例如消息上下文菜单、标记消息为已读、显示群聊已读回执详情和支持表情反应等。此外，还可以实现精确导航到特定消息、启用多选消息和提供广泛的自定义能力。

当与tencent_cloud_chat_conversation和tencent_cloud_chat_contact组件结合使用时，消息组件可以实现无缝导航，无需手动导航实现。此外，与tencent_calls_uikit集成后，还可以发起语音/视频通话，从而增强整体通信体验。

总之，消息组件使您能够创建具有丰富功能的吸引人的聊天应用，以满足各种用户需求并提供愉悦的用户体验。

开始使用

导入和声明

首先，在您的项目中添加tencent_cloud_chat_message UI模块。

安装完成后，您需要在TencentCloudChat.controller.initUIKit方法的components参数中的usedComponentsRegister注册此UI组件。以下是一个示例：

await TencentCloudChat.controller.initUIKit(
  components: TencentCloudChatInitComponentsRelated(
    usedComponentsRegister: [
      TencentCloudChatMessageManager.register, /// 添加这一行
      /// ...
    ],
  /// ...
  ),
  /// ...
);

如果您的项目已经集成了如tencent_cloud_chat_conversation或tencent_cloud_chat_contact等模块来显示对话、联系人或群组列表，则这些模块将自动导航到消息组件。

如果导航仅需要从这些内置组件中进行，而不需要从您的自定义页面进行，则只需完成这一步骤。UIKit会内部处理导航过渡，无需手动编码。

对于需要从自定义页面进行导航的项目，请参阅以下步骤。

导航到消息组件

在导航之前，准备一个TencentCloudChatMessageOptions实例以指定对话：

final messageOptions = TencentCloudChatMessageOptions(
      // 提供userID或groupID之一，指示要聊天的对话。
      userID: "", // 对于一对一聊天，提供另一用户的userID
      groupID: "", // 对于群聊，提供群ID
    );

使用一行代码轻松导航

只需调用navigateToMessage方法即可轻松导航到消息组件：

/// 使用上面构建的消息选项
navigateToMessage(context: context, options: messageOptions);

手动导航

如果您需要手动处理导航，可以将组件包裹在自定义页面中，或者利用自定义功能如TencentCloudChatMessageController，首先实例化一个TencentCloudChatMessage组件。

这为您提供在应用程序中集成消息组件时更大的控制和灵活性：

// 如果需要使用控制器，请维护一个TencentCloudChatMessageController实例。
final TencentCloudChatMessageController messageController = TencentCloudChatMessageController();

final message = TencentCloudChatMessage(
      // 确保提供选项。使用上面构建的消息选项。
      options: messageOptions,

      // 如果需要使用控制器，请提供一个控制器实例。
      controller: messageController,

      // 其他参数，如构建器，可以在全局指定或在此静态传递，具体取决于您的需求。有关详细用法，请参阅参数和方法注释。
    );

您可以将此实例化的组件放置在单独页面的build方法中，也可以像使用Navigator.push一样直接用于导航。

如果您使用TencentCloudChatMessageController，建议将其维护在StatefulWidget的State中，使用单个实例来控制组件。有关具体用法，请参阅内部注释。

自定义细节

您可以使用builders和config来自定义消息组件的各种方面。这两种选项提供了不同程度的定制，允许您根据具体需求调整组件。

使用配置

对于简单的基础配置，您可以使用config参数。消息组件的config由TencentCloudChatMessageConfig类提供。

它包括各种数据类型的控制选项，如布尔值、整数和自定义参数。每个控制选项都是一个方法T Function({String? userID, String? groupID})，提供当前对话的userID或groupID信息。您可以使用这些字段返回适当的配置值。

这种方法允许您定义一个全局的TencentCloudChatMessageConfig类，该类在自动导航过程中有效，无需手动实例化一个TencentCloudChatMessage对象并传递它。这是因为大多数情况下，不同类型的消息需要不同的配置参数。

以下是一个示例：

final messageConfig = TencentCloudChatMessageConfig(
    // 演示一种配置选项。
    // 是否在消息列表中显示其他用户的头像。
    showOthersAvatar: ({userID, groupID}){
      if(userID != null && userID.isNotEmpty) {
        // 如果是一对一聊天，不显示其他用户的头像，因为它已经在头部显示了。
        return false;
      }
      // 如果是群聊，显示其他用户的头像。
      return true;
    }
);

更多关于Flutter腾讯云聊天消息插件tencent_cloud_chat_message的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter腾讯云聊天消息插件tencent_cloud_chat_message的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tencent_cloud_chat_message 是一个用于在 Flutter 应用中集成腾讯云即时通信（IM）服务的插件。它允许开发者轻松地在应用中实现消息的发送、接收和展示等功能。以下是如何使用 tencent_cloud_chat_message 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 tencent_cloud_chat_message 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  tencent_cloud_chat_message: ^1.0.0  # 请根据实际情况填写版本号

然后运行 flutter pub get 来获取依赖。

2. 初始化腾讯云 IM SDK

在使用插件之前，你需要初始化腾讯云 IM SDK。通常，你需要在应用的入口处（如 main.dart）进行初始化：

import 'package:tencent_cloud_chat_message/tencent_cloud_chat_message.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化腾讯云 IM SDK
  await TencentCloudChatMessage.init(
    sdkAppId: 'your_sdk_app_id',  // 替换为你的 SDK App ID
  );

  runApp(MyApp());
}

3. 登录腾讯云 IM

在用户登录你的应用后，你需要调用登录接口来登录腾讯云 IM：

import 'package:tencent_cloud_chat_message/tencent_cloud_chat_message.dart';

Future<void> loginIM(String userId, String userSig) async {
  await TencentCloudChatMessage.login(
    userId: userId,
    userSig: userSig,
  );
}

userId 是用户的唯一标识，userSig 是用户签名的生成结果，通常由你的服务器生成。

4. 发送消息

你可以使用 tencent_cloud_chat_message 插件发送文本消息、图片消息等。以下是一个发送文本消息的示例：

import 'package:tencent_cloud_chat_message/tencent_cloud_chat_message.dart';

Future<void> sendTextMessage(String receiverId, String text) async {
  await TencentCloudChatMessage.sendTextMessage(
    receiverId: receiverId,
    text: text,
  );
}

5. 接收消息

你可以通过监听消息事件来接收消息。以下是一个监听新消息的示例：

import 'package:tencent_cloud_chat_message/tencent_cloud_chat_message.dart';

void listenForMessages() {
  TencentCloudChatMessage.onNewMessage.listen((message) {
    print('收到新消息: ${message.text}');
  });
}

6. 展示消息

你可以使用 TencentCloudChatMessage 提供的组件来展示消息列表。例如，使用 MessageList 组件来展示聊天记录：

import 'package:flutter/material.dart';
import 'package:tencent_cloud_chat_message/tencent_cloud_chat_message.dart';

class ChatScreen extends StatelessWidget {
  final String receiverId;

  ChatScreen({required this.receiverId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('聊天'),
      ),
      body: Column(
        children: [
          Expanded(
            child: MessageList(
              receiverId: receiverId,
            ),
          ),
          // 添加消息输入框和发送按钮
        ],
      ),
    );
  }
}

7. 登出

当用户退出应用时，记得调用登出接口：

import 'package:tencent_cloud_chat_message/tencent_cloud_chat_message.dart';

Future<void> logoutIM() async {
  await TencentCloudChatMessage.logout();
}

8. 处理异常

在实际使用中，你可能会遇到各种异常情况，如网络问题、登录失败等。因此，建议你添加异常处理逻辑：

try {
  await TencentCloudChatMessage.login(
    userId: userId,
    userSig: userSig,
  );
} catch (e) {
  print('登录失败: $e');
}
回到顶部