产品动态
公告
TencentCloudChatMessage 组件提供了私信聊天(1V1)和群聊(Group)功能,支持对消息的多种操作,例如发送不同类型的消息、对消息长按回复/引用、查询消息已读回执详情等。TencentCloudChatMessage 到您的 App 中。聊天界面使用场景非常广泛,例如房产中介咨询、在线医疗问诊、电商在线客服、保险远程定损等。界面效果可参考文档 Chat 重点功能介绍。flutter pub add tencent_cloud_chat
flutter pub add tencent_cloud_chat_message
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"endtarget.build_configurations.each do |config|config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)','PERMISSION_MICROPHONE=1','PERMISSION_CAMERA=1','PERMISSION_PHOTOS=1',]endendend
TencentCloudChatMaterialApp:将项目的MaterialApp替换为TencentCloudChatMaterialApp。这将自动管理和配置语言、主题(带有material3)、主题模式和其他设置,确保UIKit的界面参数与您的项目保持一致。MaterialApp 替换为 TencentCloudChatMaterialApp 。此推荐方法自动管理全局配置,包括本地化、主题和主题模式。
但是,如果由于大量自定义或使用其他包(如 GET )而希望保留项目的 MaterialApp ,则可以手动初始化UIKit。本指南将指导您完成该过程。
在全局配置中,本地化是必选的,而主题和主题模式设置是可选的。我们开始吧。import 'package:tencent_cloud_chat_intl/localizations/tencent_cloud_chat_localizations.dart';
MaterialApp 或 GetMaterialApp 等第三方包提供的其他条目中。MaterialApp(localizationsDelegates: const [/// Your configurationGlobalMaterialLocalizations.delegate,/// Add this line...TencentCloudChatLocalizations.localizationsDelegates, /// Add this line],supportedLocales: [/// Your configuration...S.delegate.supportedLocales,/// Add this line...TencentCloudChatLocalizations.supportedLocales,],/// ... Other configurations)
locale ,例如在应用启动时记录用户指定的语言,而不是遵循系统设置。此配置将同时应用于您的项目和聊天UIKit。TencentCloudChatTheme 类定义,通过 TencentCloudChat.dataInstance.Theme 全局维护和管理。TencentCloudChatTheme theme = TencentCloudChat.dataInstance.theme;
MaterialApp 指定 theme 和 darkTheme。您还可以根据我们维护的亮度状态设置 themeMode 状态。这确保了您的应用程序和我们的 Chat UIKit 在外观上保持一致,提高了用户体验。(您可以按照下面的描述自定义此主题样式。)MaterialApp 的小部件)转换为 StatefulWidget。将 TencentCloudChatTheme 主题作为状态添加,并监听 Stream<TencentCloudChatTheme>? themeDataListener 以更新其值并根据动态、可自定义的主题数据构建应用程序。以下是一个示例代码:// Theme instance for the Chat UIKitTencentCloudChatTheme theme = TencentCloudChat.dataInstance.theme;// Listener for theme data changesStream<TencentCloudChatTheme>? themeDataListener = TencentCloudChat.eventBusInstance.on<TencentCloudChatTheme>();// Callback for handling theme data changesvoid _themeDataChangeCallback(TencentCloudChatTheme themeData) {setState(() {theme = themeData;});}// Adds a listener for theme data changesvoid _addThemeDataChangeListener() {themeDataListener?.listen(_themeDataChangeCallback,);}@overridevoid initState() {super.initState();_addThemeDataChangeListener();}// .......return MaterialApp(themeMode: theme.brightness != null ? (theme.brightness == Brightness.light ? ThemeMode.light : ThemeMode.dark) : null,theme: theme.getThemeData(brightness: Brightness.light),darkTheme: theme.getThemeData(brightness: Brightness.dark),/// ... Other configurations);
MaterialApp 中指定),请使用 TencentCloudChatCoreController.setThemeColors 方法为亮色和暗色模式指定外观颜色。有关具体使用说明,请参阅代码中的注释。TencentCloudChatCoreController.setBrightnessMode 或 TencentCloudChatCoreController.toggleBrightnessMode。有关具体使用说明,请参阅代码中的注释。TencentCloudChat.controller.initUIKit方法进行初始化和登录。调用说明和参考代码如下:callbacks 以可定制的方式通过 Dialog 或 ToolTip 高效地处理 SDK API 错误和需要用户关注的特定 UIKit 事件。await TencentCloudChat.controller.initUIKit(config: TencentCloudChatConfig(), /// [可选]: 影响整个聊天界面的全局配置,包括用户相关配置、主题相关配置等。options: TencentCloudChatInitOptions(sdkAppID: , /// [必需]: 腾讯云聊天应用的SDKAppIDuserID: , /// [必需]: 已登录用户的userIDuserSig: , /// [必需]: 已登录用户的userSig),components: TencentCloudChatInitComponentsRelated( /// [必需]: 模块化UI组件相关设置,全局生效。usedComponentsRegister: [/// [必需]: 聊天界面中使用的组件的注册函数列表。/// 只需要使用 TencentCloudChatMessage 中的 `register` 即可。TencentCloudChatMessageManager.register,],componentConfigs: TencentCloudChatComponentConfigs(/// [可选]: 在此处为每个UI模块组件提供自定义配置。这些构建器将全局应用。),componentBuilders: TencentCloudChatComponentBuilders(/// [可选]: 在此处为每个UI模块组件提供自定义UI构建器。这些构建器将全局应用。),componentEventHandlers: TencentCloudChatComponentEventHandlers(/// [可选]: 在此处为UI组件相关事件提供自定义事件处理程序。这些构建器将全局应用。),),/// [关键]: 强烈建议将以下回调侦听器集成到SDK事件、SDK API错误和需要用户关注的特定UIKit事件的有效管理中。/// 有关详细用法,请参阅本自述文件末尾的“引入UIKit回调”部分。callbacks: TencentCloudChatCallbacks(onTencentCloudChatSDKEvent: V2TimSDKListener(), /// [可选]: 处理SDK事件,如onKickedOffline和onUserSigExpired等。onTencentCloudChatSDKFailCallback: (apiName, code, desc) {}, /// [可选]: 处理SDK API错误。onTencentCloudChatUIKitUserNotificationEvent: (TencentCloudChatComponentsEnum component, TencentCloudChatUserNotificationEvent event) {}, /// [可选]: 处理全局范围内需要用户关注的特定UIKit事件。),plugins: [], /// [可选]: 使用的插件,如tencent_cloud_chat_robot等。具体用法请参阅每个插件的自述文件。);
TencentCloudChatMessage ,即可为其无缝搭建聊天模块,同时满足一对一和群聊的需求。TencentCloudChatMessageOptions 调用 navigateToMessage 方法即可轻松发起聊天,如下所示:final messageOptions = TencentCloudChatMessageOptions(// 提供UserID或GroupID,指示聊天对话。userID: "", // 对于一对一聊天,提供另一个用户的用户 IDgroupID: "", // 对于群聊,请提供 groupID);/// 使用上面构造的 messageOptionsnavigateToMessage(context: context, options: messageOptions);
TencentCloudChatMessage 组件。final messageOptions = TencentCloudChatMessageOptions(// 提供UserID或GroupID,指示聊天对话。userID: "", // 对于一对一聊天,提供另一个用户的用户 IDgroupID: "", // 对于群聊,请提供 groupID);final Widget message = TencentCloudChatMessage(options: messageOptions,// ... 其他参数,如 builders,可以根据您的需求在全局范围内指定或在此处静态传入。有关详细用法,请参考参数和方法注释。);
build 方法中,或像使用 Navigator.push 一样直接用于导航。eventHandlers 来管理特定组件的事件。这包括 uiEventHandlers(如各种 onTap 类似的事件)和 lifeCycleEventHandlers(如发送消息后触发的事件)。文档反馈