Flutter腾讯云聊天服务集成插件tencent_cloud_chat_common的使用

Flutter腾讯云聊天服务集成插件tencent_cloud_chat_common的使用

引言

介绍Common Widgets集合，这是腾讯云聊天UIKit的重要组成部分，旨在为您提供一组多功能且可重用的组件。

这些组件被设计为自动适应移动和桌面环境，确保跨平台的一致性和响应式用户界面。

为了简化开发过程并保持整个聊天应用程序的UI一致性，我们已将所有内部常用组件开放供您使用。

通过利用这些预构建的组件，您可以显著减少开发时间和精力，同时在您的应用中保持专业且一致的外观。

集成所需的插件

以下是集成所需的插件：

• tencent_cloud_chat_common
• tencent_cloud_chat_conversation
• tencent_cloud_chat_message
• tencent_cloud_chat_contact
• tencent_cloud_chat_sticker
• tencent_cloud_chat_message_reaction
• tencent_cloud_chat_text_translate
• tencent_cloud_chat_sound_to_text
• tencent_cloud_chat_push
• tencent_calls_uikit

对于集成方法，请参考GitHub演示。

要集成旧版本的微信样式UI，请集成tencent_cloud_chat_uikit，您可以在GitHub演示中找到相关信息。

使用示例

以下是一些如何在您的应用中使用这些常用组件的例子：

• TencentCloudChatAvatar: 这是一个用于显示用户或群组头像的组件。
• TencentCloudChatOperationBar: 这是一个可配置的操作栏组件，可以根据您的应用需求进行自定义。

还有许多其他组件可供您探索并集成到您的聊天应用中。

桌面专用组件

除了常用组件外，我们还提供了一组桌面专用组件。这些组件专为桌面交互而设计，提供了更符合桌面环境的用户体验。例如：

• TencentCloudChatDesktopPopup.showColumnMenu: 这是一个垂直菜单组件，通常用于上下文菜单。
• TencentCloudChatDesktopPopup.showSecondaryConfirmDialog: 这是一个二次确认对话框组件，当您需要用户确认删除消息等操作时使用。
• TencentCloudChatDesktopPopup.showPopupWindow: 这个组件展示一个可移动的模态窗口。
• TencentCloudChatDesktopPopup.showMedia: 这是一个全屏媒体预览组件，适用于图片、视频等。
• TencentCloudChatDragArea: 这个组件为桌面应用提供拖放区域。

这些只是腾讯云聊天UIKit中可用组件的一部分。欢迎您探索这些和其他组件以创建真正吸引人且用户友好的聊天应用。

如果您有任何问题或需要更多信息，请随时联系我们。

• Telegram: Telegram
• X (Twitter): X (Twitter)

完整示例Demo

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('腾讯云聊天服务集成')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 显示用户或群组头像
              TencentCloudChatAvatar(
                userId: "user1",
                size: Size(100, 100),
              ),
              SizedBox(height: 20),
              // 自定义操作栏
              TencentCloudChatOperationBar(
                items: [
                  OperationBarItem(icon: Icons.message, label: "发送消息"),
                  OperationBarItem(icon: Icons.call, label: "拨打电话"),
                ],
                onPressed: (index) {
                  print("点击了第 $index 个操作项");
                },
              ),
              SizedBox(height: 20),
              // 显示模态窗口
              ElevatedButton(
                onPressed: () {
                  TencentCloudChatDesktopPopup.showPopupWindow(
                    context: context,
                    title: "提示",
                    content: Text("这是一个模态窗口"),
                    actions: [
                      PopupAction(label: "取消", onPressed: () => Navigator.pop(context)),
                      PopupAction(label: "确定", onPressed: () => Navigator.pop(context)),
                    ],
                  );
                },
                child: Text("显示模态窗口"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包

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

2. 创建主应用

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('腾讯云聊天服务集成')),
           body: Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 // 显示用户或群组头像
                 TencentCloudChatAvatar(
                   userId: "user1",
                   size: Size(100, 100),
                 ),
                 SizedBox(height: 20),
                 // 自定义操作栏
                 TencentCloudChatOperationBar(
                   items: [
                     OperationBarItem(icon: Icons.message, label: "发送消息"),
                     OperationBarItem(icon: Icons.call, label: "拨打电话"),
                   ],
                   onPressed: (index) {
                     print("点击了第 $index 个操作项");
                   },
                 ),
                 SizedBox(height: 20),
                 // 显示模态窗口
                 ElevatedButton(
                   onPressed: () {
                     TencentCloudChatDesktopPopup.showPopupWindow(
                       context: context,
                       title: "提示",
                       content: Text("这是一个模态窗口"),
                       actions: [
                         PopupAction(label: "取消", onPressed: () => Navigator.pop(context)),
                         PopupAction(label: "确定", onPressed: () => Navigator.pop(context)),
                       ],
                     );
                   },
                   child: Text("显示模态窗口"),
                 ),
               ],
             ),
           ),
         ),
       );
     }
   }