Flutter腾讯云聊天UI组件插件tencent_cloud_chat

Flutter腾讯云聊天UI组件插件tencent_cloud_chat_uikit的使用

Suggestion

此插件为微信样式UI界面，更推荐使用WhatsApp样式UI界面。集成WhatsApp样式UI所需的插件包括：

对于WhatsApp样式UI的集成方法，请参考GitHub演示。

产品介绍

只需集成Chat SDK，即可轻松获得聊天、会话、群组等功能，并且可以通过信令消息与白板等其他产品进行通信。聊天功能可以覆盖各种业务场景，支持多种平台的接入和使用，充分满足通信需求。

查看我们的示例应用

本文件介绍了如何在iOS平台上快速运行Chat演示程序。对于其他平台，请参阅文档：

TUIKit介绍

Chat SDK自带TUIKit，这是一套内置了聊天业务逻辑的官方UI组件集。TUIKit包含会话、聊天、关系链和群组等组件。更多详情请见TUIKit库概述。开发者可以使用这些UI组件快速方便地为移动应用程序添加聊天模块。

目前，Flutter TUIKit包含以下主要组件：

TIMUIKitCore: 核心入口
TIMUIKitConversation: 会话列表
TIMUIKitChat: 聊天模块，包括历史消息列表和消息发送区域，还有消息反应和URL预览等功能
TIMUIKitContact: 联系人列表
TIMUIKitProfile: 用户资料和关系管理
TIMUIKitGroupProfile: 群组资料和管理
TIMUIKitGroup: 自己加入的群组列表
TIMUIKitBlackList: 被屏蔽用户列表
TIMUIKitNewContact: 新联系人申请列表
TIMUIKitSearch: 全局搜索
TIMUIKitSearchMsgDetail: 特定会话内搜索

除了这些组件，还有其他有用的组件和小部件可供开发人员根据其业务需求使用，例如群组加入申请列表和群成员列表。

兼容平台

这些平台都支持部署我们的Chat UIKit。

Android
iOS
Web (版本0.1.4及更高版本)
Windows (版本2.0.0及更高版本)
macOS (版本2.0.0及更高版本)

开始使用

请参考运行演示以获取完整的详细指南。

指导说明

以下指南描述了如何使用Flutter TUIKit快速构建一个简单的聊天应用。如果您想了解每个组件的详细信息和参数，请参阅附录。

步骤0：创建两个测试账号

注册并登录到Chat控制台。

创建一个应用并进入它。点击用户并创建两个账号。

正确分发UserSig的方法是将UserSig的计算代码集成到您的服务器中，并提供面向应用的API。当需要UserSig时，您的应用可以向业务服务器请求动态的UserSig。更多信息，请见如何在服务器上计算UserSig？。

步骤1：创建一个Flutter应用并添加权限配置

通过Flutter文档快速创建一个Flutter应用。

TUIKit需要相机、相册、录音、网络等权限来进行基本的消息功能。您需要手动声明这些权限才能正常使用相关功能。

Android

打开android/app/src/main/AndroidManifest.xml，并在<manifest>和</manifest>之间添加以下行：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>

iOS

打开ios/Podfile，并在文件末尾添加以下行：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
            config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
            config.build_settings['ENABLE_BITCODE'] = 'NO'
            config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
        end
    target.build_configurations.each do |config|
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
            '$(inherited)',
            'PERMISSION_MICROPHONE=1',
            'PERMISSION_CAMERA=1',
            'PERMISSION_PHOTOS=1',
          ]
        end
  end
end

步骤2：安装依赖

在pubspec.yaml文件的dependencies下添加tencent_cloud_chat_uikit，或者运行以下命令：

flutter pub add tencent_cloud_chat_uikit

默认支持Android和iOS。如果还希望在web上使用，请参考以下指南。

Web支持

需要0.1.4或以上版本支持web。

如果现有的Flutter项目不支持web，请在项目根目录运行flutter create .来添加web支持。

使用npm或yarn安装JavaScript依赖到web/目录下：

cd web

npm init

npm i tim-js-sdk

npm i tim-upload-plugin

打开web/index.html，并在<head>和</head>之间添加以下两行以导入它们：

<script src="./node_modules/tim-upload-plugin/index.js"></script>
<script src="./node_modules/tim-js-sdk/tim-js-friendship.js"></script>

步骤3：初始化TUIKit

在应用启动时初始化TUIKit。您只需要初始化一次项目就可以开始使用。

首先使用TIMUIKitCore.getInstance()获取TUIKit实例，然后用您的sdkAppID初始化它。

/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';

final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();

@override
void initState() {
  _coreInstance.init(
      sdkAppID: 0, // 将0替换为您腾讯云聊天应用的SDKAppID
      loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,
      listener: V2TimSDKListener());
  super.initState();
}

建议在此处注册一个onTUIKitCallbackListener回调函数。详情请见附录。

步骤4：获取签名并登录

现在您可以登录步骤0中生成的其中一个测试账号，开始使用腾讯云聊天模块。

使用_coreInstance.login进行登录：

/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';

final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
_coreInstance.login(userID: userID, userSig: userSig);

注意：将UserSig导入到您的应用中仅用于调试目的，不能用于发布版本。在发布您的应用之前，您应该从您的服务器生成UserSig。更多信息请见如何生成签名。

步骤5：实现会话列表页面

您可以使用会话（频道）列表页面作为聊天模块的首页，其中包括所有有聊天记录的用户和群组会话。

您可以创建一个Conversation类，以TIMUIKitConversation作为其主体来渲染会话列表。您只需要提供onTapItem回调，允许用户导航到每个会话的聊天页面。在下一步中，我们将介绍Chat类。

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

class Conversation extends StatelessWidget {
  const Conversation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "消息",
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: TIMUIKitConversation(
        onTapItem: (selectedConv) {
          Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => 
                    Chat(
                      selectedConversation: selectedConv,
                    ),
              ));
        },
      ),
    );
  }
}

步骤6：实现聊天页面

聊天页面由主消息列表和底部的消息发送栏组成。

您可以创建一个Chat类，以TIMUIKitChat作为其主体来渲染聊天页面。我们建议提供一个onTapAvatar回调函数，用于导航到当前联系人的个人资料页面，我们将在下一步中介绍。

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

class Chat extends StatelessWidget {
  final V2TimConversation selectedConversation;

  const Chat({Key? key, required this.selectedConversation}) : super(key: key);

  String? _getConvID() {
    return selectedConversation.type == 1
        ? selectedConversation.userID
        : selectedConversation.groupID;
  }

  @override
  Widget build(BuildContext context) {
    return TIMUIKitChat(
      conversationID: _getConvID() ?? '', 
      conversationType: selectedConversation.type ?? 1, 
      conversationShowName: selectedConversation.showName ?? "", 
      onTapAvatar: (_) {
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => UserProfile(userID: userID),
            ));
      }, 
    );
  }
}

步骤7：实现用户个人资料页面

此页面显示特定用户的个人资料，并维护当前已登录用户与其他用户之间的关系。

您可以创建一个UserProfile类，以TIMUIKitProfile作为其主体来渲染用户个人资料页面。

您只需要提供userID参数，而此组件会基于友谊的存在自动生成个人资料和关系维护页面。

提示：如果您想要自定义此页面，可以先使用profileWidgetBuilder来自定义一些个人资料小部件，并使用profileWidgetsOrder确定其垂直顺序。如果这种方法无法满足您的业务需求，您可以考虑使用builder代替。

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

class UserProfile extends StatelessWidget {
  final String userID;

  const UserProfile({required this.userID, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "消息",
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: TIMUIKitProfile(
        userID: widget.userID,
      ),
    );
  }
}

现在您的应用可以发送和接收消息，显示会话列表，并管理联系人好友关系。您可以使用TUIKit中的其他组件快速方便地实现完整的聊天模块。

常见问题

我是否需要在集成TUIKit后再次集成Chat SDK？

不需要。如果您想使用Chat SDK相关的API，可以通过TIMUIKitCore.getSDKInstance()获取它们。为了确保Chat SDK版本一致性，推荐使用该方法。

当我发送语音、图片文件或其他消息时为什么会发生强制退出？

检查您是否已经启用了相机、麦克风、相册等相关权限。

参考步骤1。

如果在构建和运行Android设备时触发错误，提示没有可用的设备，我该怎么办？

检查设备是否被其他资源占用。或者，点击构建以生成一个APK包，将其拖到模拟器中并运行。

如果在第一次运行iOS设备时出现错误，我该怎么办？

如果在配置后出现错误，请点击产品 > 清理构建文件夹，清理产品，然后重新运行pod install或flutter run。

当我在佩戴Apple Watch时在真实的iOS设备上调试时出现错误，我该怎么办？

在您的Apple Watch上开启飞行模式，并在iPhone上转到设置 > 蓝牙关闭蓝牙。

重启Xcode（如果已打开），然后重新运行flutter run。

当我在自动创建的应用中导入TUIKit后，在Android设备上出现错误时我该怎么办？

打开android\app\src\main\AndroidManifest.xml并完成xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label" 如下：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="Replace it with your Android package name"
    xmlns:tools="http://schemas.android.com/tools">
    <application android:label="@string/android_label" tools:replace="android:label"
        android:icon="@mipmap/ic_launcher"
    // 指定图标路径
    android:usesCleartextTraffic="true"
    android:requestLegacyExternalStorage="true">

打开android\app\build.gradle并完成defaultConfig中的minSdkVersion和targetSdkVersion。

defaultConfig {
  applicationId "" // 替换为您自己的Android包名
  minSdkVersion 21
  targetSdkVersion 30
}

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

eggper 1楼

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

当然，以下是如何在Flutter项目中集成并使用tencent_cloud_chat_uikit插件来实现腾讯云聊天功能的示例代码。这个插件提供了一个现成的UI组件来简化聊天功能的实现。

第一步：添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  tencent_cloud_chat_uikit: ^最新版本号 # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

第二步：配置腾讯云SDK

在使用tencent_cloud_chat_uikit之前，你需要在腾讯云上创建一个IM应用并获取相关的SDK配置参数（如SDKAppId，SignKey等）。

第三步：初始化插件

在你的Flutter项目的入口文件（通常是main.dart）中，进行插件的初始化。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化IM SDK
    TencentCloudChatUIKit.init({
      'SDKAppId': '你的SDKAppId',
      'SignKey': '你的SignKey',
      'Region': '你的Region', // 例如：ap-guangzhou
    });

    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('腾讯云聊天示例'),
      ),
      body: ChatPage(
        groupId: '你的群组ID', // 替换为你的群组ID或用户ID（如果是单聊）
        userName: '你的用户名', // 替换为你的用户名
      ),
    );
  }
}

第四步：处理用户认证和登录

在实际应用中，你可能需要处理用户的登录和认证。这里假设你已经有了用户认证的逻辑，并在用户登录成功后调用了IM SDK的初始化。

第五步：自定义UI组件（可选）

tencent_cloud_chat_uikit插件提供了基础的聊天UI组件，但你也可以根据需要自定义UI。例如，你可以通过实现ChatPage的自定义逻辑来添加额外的功能或样式。

示例代码总结

上述代码展示了如何在Flutter项目中集成tencent_cloud_chat_uikit插件，并展示了一个简单的聊天界面。实际项目中，你可能需要根据业务需求进一步扩展和定制。

注意事项

权限配置：确保你的Android和iOS项目已经配置了必要的权限，如网络访问权限。
错误处理：在实际项目中，添加错误处理逻辑，如处理网络错误、登录失败等。
自定义功能：根据需求，可以自定义聊天界面的样式和功能，如消息发送、接收、加载更多等。

希望这个示例代码能帮助你在Flutter项目中集成腾讯云聊天功能。如果有更多问题，请参考tencent_cloud_chat_uikit的官方文档。