tencent cloud

文档反馈

最后更新时间:2024-04-09 16:36:13
    说明:
    这份文档主要介绍我们新版的 Flutter UIKit(tencent_cloud_chat)。如果您需要浏览旧版 UIKit 的文档,请点击这里
    欢迎使用腾讯云IM开发的全新 Flutter Chat UIKit。在我们之前发布的 tencent_cloud_chat_uikit 版本两年后,我们很高兴推出这个完全重新设计和开发的工具包,它从头开始构建。
    我们的新 Flutter Chat UIKit 旨在为开发者提供一套全面的工具,以便轻松创建功能丰富的聊天应用程序。
    它采用模块化方法构建,让您可以选择所需的组件,同时保持应用程序轻量级和高效。
    UIKit 包括许多功能,如会话列表消息处理联系人列表、用户和群组资料、搜索功能等。
    
    
    

    特点

    1. 主题定制:可以在运行时切换亮色和暗色模式,或使用我们丰富的选项自定义您自己的主题。
    2. 国际化:我们增加了对更多语言的支持,包括阿拉伯语,并推出了中东UI。我们强大且用户友好的本地化工具使得更容易自定义本地化配置和翻译,并提供本地化的用户体验。
    3. 性能提升:我们对消息列表的性能进行了显著改进,并引入了高效且精确的消息定位功能。
    4. 多媒体支持:改进了多媒体和文件消息处理,为语音消息提供连续播放功能,并提供可滑动的多媒体消息预览
    5. 细节优化:我们增加了许多细节优化,包括丰富的动画、触觉反馈和优化的界面,以提高用户体验。
    6. 新功能:享受新功能,如网格样式头像、重新设计的转发面板、群组成员选择器和新的消息长按菜单等。
    7. 模块化包:组件被拆分为模块化包,允许按需导入并减少不必要的膨胀。每个模块化包都支持内置的导航转换。例如,您可以从会话自动导航到消息以开始聊天,而无需手动实例化多个页面并自己处理转换。这大大简化了开发和集成的复杂性。
    8. 对开发者友好的设计:我们引入了更统一、标准化的组件参数设计、更清晰的代码命名和更详细的注释,以使开发更加简单高效。
    我们很高兴您尝试我们的新Flutter Chat UIKit,并期待看到您将用它创建的令人惊叹的应用程序!

    兼容性

    我们的 UIKit 支持手机端, 平板端桌面端 UI 样式,并兼容 Android、iOS、macOS、Windows 和 Web(将在未来版本中支持)。
    它内置支持英语、简体中文、繁体中文、日语、韩语和阿拉伯语(支持阿拉伯RTL界面)以及亮色和暗色外观样式。

    要求

    Flutter版本:3.16或更高
    Dart版本:3.0或更高

    开始使用

    Demo

    你可以参考 Demo 源码 配合此文档为了保证顺滑成功的接入流程.

    引入包

    基础包

    要开始使用我们的UIKit,首先导入基础包,tencent_cloud_chat

    模块化 UI 组件包

    接下来,从以下列表中导入适合您需求的所需 UI 组件包:
    tencent_cloud_chat_group_search(内测中)
    下面展示了我们的UIKit的架构:
    
    说明:
    平台集成
    在继续“基本用法”部分之前,请确保完成此处列出的其他平台集成步骤,特别是当您针对这些特定平台进行部署时。
    Web / macOS: 如果您计划在 WebmacOS 平台上部署项目,请 参考此文档说明
    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
    Android / Windows: 不需要执行其他操作。

    基本用法

    在开始使用每个模块化包UI组件之前,您需要在项目中遵循一些初始设置步骤。
    1. 准备必要的腾讯云IM 配置信息,如sdkappid、测试userID、userSig等。您可以参考此文档:https://www.tencentcloud.com/document/product/1047/45907#.E5.89.8D.E5.BA.8F.E5.B7.A5.E4.BD.9C
    2. 安装 Package:
    在您的Flutter项目中,安装主包和上面的“开始使用”部分中提到的可选模块化包。
    3. 全局配置:
    导入TencentCloudChatMaterialApp:将项目的MaterialApp替换为TencentCloudChatMaterialApp。这将自动管理和配置语言、主题(带有material3)、主题模式和其他设置,确保UIKit的界面参数与您的项目保持一致。
    这一步将接管项目的语言、主题和主题模式配置。如果您不希望我们为您的项目自动管理所有这些配置,您可以按照以下指南在您的项目中手动导入必要的功能。
    4. 初始化和登录:
    调用TencentCloudChat.controller.initUIKit方法进行初始化和登录。调用说明和参考代码如下:
    说明:
    我们高度建议配置 callbacks 以可定制的方式通过 DialogToolTip 高效地处理 SDK API 错误和需要用户关注的特定 UIKit 事件。
    有关详细说明、用法和事件代码列表,请参阅本指南
    await TencentCloudChat.controller.initUIKit(
    context: context,
    config: TencentCloudChatConfig(
    usedComponentsRegister: [
    TencentCloudChatConversationInstance.register,
    TencentCloudChatMessageInstance.register,
    /// 上面的注册是示例。
    /// 在此字段中,传入每个子模块UI包的注册。
    /// 安装每个子模块UI包后,需要在此声明它才能使用。
    ],
    preloadDataConfig: TencentCloudChatInitDataConfig(
    /// 与预加载数据相关的配置,用于提高性能
    ),
    userConfig: TencentCloudChatUserConfig(
    /// 与用户相关的配置
    ),
    ),
    /// **[决定性的]**: 强烈建议加入以下回调监听器,以便有效管理SDK API错误和需要用户关注的特定UIKit事件。 /// 有关详细用法,请参阅pub.dev上自述文件中的指南。 callbacks: TencentCloudChatCallbacks( onTencentCloudChatSDKFailCallback: (apiName, code, desc) {}, /// 处理 SDK API 错误。 onTencentCloudChatUIKitUserNotificationEvent: (TencentCloudChatComponentsEnum component, TencentCloudChatUserNotificationEvent event) {}, /// 在全局范围内处理需要用户关注的特定UIKit事件。 ),
    options: TencentCloudChatInitOptions(
    sdkAppID: , /// 您的腾讯云 IM 应用的SDKAppID
    userID: , /// 已登录用户的userID
    userSig: , /// 已登录用户的userSig
    sdkListener: V2TimSDKListener(), /// 与Chat SDK注册的事件监听器
    ),
    plugins: [], /// 使用的插件,如 tencent_cloud_chat_robot 等。具体用法请参考每个插件的README。
    );
    完成 UIKit 的基本集成过程后,您可以继续探索每个模块化包的文档,完成各个 UI 组件的集成。
    这将帮助您了解每个组件的具体用法和定制选项,让您创建满足需求的定制聊天应用。
    说明:
    本文档中列出了每个模块化包的文档。

    每个模块化包的通用用法

    每个模块化 UI 组件包有五个统一的输入参数,提供了高度定制和控制组件的能力。这些参数分别是:
    options:组件特定的基本参数,使组件能够正常工作。例如,消息组件需要会话信息。一些通用组件可能不需要此参数。
    config:一组组件特定的配置,允许进行细粒度定制。例如,消息组件的附件区域配置可以根据您的应用需求进行调整。
    builders:组件内的一组小部件构建方法,允许外部UI定制。为简化UI开发,每个构建器都带有所需的参数和方法,使数据和逻辑层方法可供使用。例如,消息组件中的messageInputBuilder暴露了各种参数,如发送不同类型消息的方法、当前会话详细信息、群成员列表等。
    eventHandlers:用于处理组件事件的回调,主要包括onTap点击事件和生命周期事件。这些处理程序允许您定义自定义行为,以响应用户交互和组件生命周期更改。
    controller:一组与组件相关的控制方法,提供额外的功能和控制其行为。例如,消息组件的scrollToBottom方法可以将消息列表滚动到底部。
    了解这些参数将帮助您有效地使用和定制各种模块化UI组件包,使您能够创建满足特定需求的定制聊天应用。

    高级用法

    TencentCloudChat.controller中的其他方法

    在上面的基本用法部分,我们解释了如何使用TencentCloudChat.controller初始化UIKit并登录。
    此控制器还包含其他几个方法,可用于控制UIKit的一些全局方面。例如:
    toggleBrightnessMode:此方法允许您在暗色和亮色模式之间切换。
    getThemeData:此方法以material3 ThemeData类的形式返回内置主题配置。这可用于为您的MaterialApp配置theme参数,确保我们的UIKit和项目的其他组件具有一致的外观。
    setThemeColors:此方法允许您自定义UIKit中暗色和亮色模式的颜色配置。这确保我们的UIKit和项目的其他组件具有一致的外观。此方法设置的配置将在所有UI组件中生效。
    setBrightnessMode:此方法允许您设置当前亮度模式。
    有关更多方法及其描述,请参阅每个方法的注释。这使您可以更好地控制UIKit的行为和外观,使其适应项目的需求。

    使用我们提供的通用组件

    我们的组件设计为自动适应移动和桌面环境。
    为了便于开发和保持UI一致性,我们已经使所有内部通用组件可供您使用。
    例如:
    TencentCloudChatAvatar:头像组件
    TencentCloudChatOperationBar:可配置操作栏组件
    等等。
    我们还提供了一些专为桌面交互设计的桌面特定组件,例如:
    TencentCloudChatDesktopPopup.showColumnMenu:垂直菜单组件,通常用于上下文菜单。
    TencentCloudChatDesktopPopup.showSecondaryConfirmDialog:二次确认对话框组件,例如,确认用户是否要删除消息。
    TencentCloudChatDesktopPopup.showPopupWindow:显示可移动模态组件。
    TencentCloudChatDesktopPopup.showMedia:全屏媒体预览组件,用于查看图片、视频等。
    TencentCloudChatDragArea:桌面组件拖动区域。
    等等。
    有关这些通用组件的具体用法,请参阅tencent_cloud_chat_common包的README

    开发适应不同屏幕和平台的自适应小部件

    为了便于使用单一代码库开发跨平台应用程序,包括移动、桌面和Web,我们已经使我们的内置自适应小部件解决方案可供您使用。
    只需将组件继承的State更改为TencentCloudChatState,您就可以使用我们提供的各种自适应功能。
    您可以为不同的平台环境覆盖不同的构建器,如defaultBuilderdesktopBuilderwebBuilder等。根据提供的提示根据需要使用它们。
    此外,此类提供了屏幕适应方法,如getWidthgetHeightgetSquareSizegetFontSize等,您可以直接使用。

    模块化 UI 组件包

    说明:
    如果您在使用我们的模块化UI包时遇到下面列出的这些空安全错误,请参阅本指南以获得帮助。
    
    这些问题可能源于在项目完全初始化之前过早使用Chat UIKit组件。
    一种可行的解决办法是在使用这些组件之前手动运行后续代码。
    TencentCloudChatIntl().init(context);
    如果上述解决方案无效,请确保您已经用提供的 TencentCloudChatMaterialApp 替换了入口 MaterialApp,或者如上面“基本用法”部分所述,在最早阶段手动实现了 UIKit 的全局配置。

    Conversation

    介绍腾讯云IM UIKit的会话组件,该组件旨在为您的聊天应用程序提供一个多功能的会话列表,无缝适应桌面和移动环境。
    会话组件提供一个会话列表,显示所有参与的会话,按最后活动时间排序。它还支持管理会话信息,确保聊天体验顺畅有序。
    当与tencent_cloud_chat_message组件一起使用时,会话组件可以在移动设备上点击会话时自动导航到相应的消息聊天页面。在桌面环境中,消息聊天页面出现在右侧区域,允许动态切换会话。

    开始使用

    导入和声明

    首先,将tencent_cloud_chat_conversation UI模块添加到您的项目中。
    安装完成后,您需要在TencentCloudChat.controller.initUIKit方法的configusedComponentsRegister参数中注册此UI组件。以下是一个例子:
    await TencentCloudChat.controller.initUIKit(
    config: TencentCloudChatConfig(
    usedComponentsRegister: [
    TencentCloudChatConversationInstance.register, /// 添加这一行
    /// ...
    ],
    /// ...
    ),
    /// ...
    );

    实例化和使用组件

    使用会话组件非常简单。只需实例化一个TencentCloudChatConversation实例,并在所需的页面上渲染它。
    默认情况下,组件会自动获取并显示所有会话信息,无需任何额外参数。
    您可以在想要显示会话列表的页面的build方法中使用此实例。
    @override
    Widget build(BuildContext context) {
    return const TencentCloudChatConversation();
    }
    只需几行代码,您就可以轻松地将会话组件集成到您的聊天应用程序中,并显示一个会话列表供用户交互。

    定制细节

    使用config
    对于简单和基本的配置,您可以使用config参数。会话组件的configTencentCloudChatConversationConfig类提供。
    它包括控制各种数据类型的选项,如布尔值、整数和自定义参数。
    例如,useDesktopMode配置决定是否在桌面环境中,当与tencent_cloud_chat_message组件一起使用时,组件应跨越全屏宽度,将会话列表显示在左侧,将当前选定会话的Message组件显示在右侧,并支持动态切换。
    使用builders
    对于更深入的UI定制,您可以使用自定义构建器。会话组件的构建器由TencentCloudChatConversationBuilders类提供。
    会话组件提供了几个构建器,如ConversationItemAvatarBuilder用于在会话项上显示头像,ConversationItemContentBuilder用于在会话项中显示内容,ConversationItemInfoBuilder用于在会话项中显示信息。

    Message

    此组件旨在通过提供基本和高级聊天功能,为您的聊天应用程序提供全面的消息体验。
    消息组件由几个关键元素组成,包括用于显示会话信息的Header、用于展示消息历史的Message Listview和用于方便发送消息的Message Input。为了提升用户体验,它还包含丰富的动画和交互细节。
    在其基础上,该组件提供了诸如发送、接收、复制、转发、预览和删除消息等基本聊天功能,确保流畅的聊天体验。
    为了满足不同用户需求,它还包括高级功能。例如消息菜单、将消息标记为已读、显示群组阅读回执详情、支持表情反应、精确导航到特定消息、消息多选和提供广泛的定制功能。
    当与tencent_cloud_chat_conversationtencent_cloud_chat_contact组件一起使用时,消息组件可以实现无缝导航,无需手动实现导航。此外,当与tencent_calls_uikit集成时,它提供了发起语音/视频通话的能力,从而提高整体通信体验。
    本质上,消息组件使您能够创建吸引人的、功能丰富的聊天应用程序,满足各种用户需求,提供愉悦的用户体验。

    开始使用

    导入和声明

    首先,将tencent_cloud_chat_message UI模块添加到您的项目中。
    安装完成后,您需要在TencentCloudChat.controller.initUIKit方法的configusedComponentsRegister参数中注册此UI组件。以下是一个例子:
    await TencentCloudChat.controller.initUIKit(
    config: TencentCloudChatConfig(
    usedComponentsRegister: [
    TencentCloudChatMessageInstance.register, /// 添加这一行
    /// ...
    ],
    /// ...
    ),
    /// ...
    );
    如果您的项目包含模块化组件,如tencent_cloud_chat_conversationtencent_cloud_chat_contact用于显示会话、联系人或群组列表,它们将自动从这些列表导航到消息组件。
    如果仅需要从这些内置组件而不是从您的自定义页面进行导航,则Message组件集成仅需此单步完成。UIKit在内部处理导航转换,无需手动编码。
    对于需要从自定义页面进行导航的项目,请参阅以下步骤。

    导航到消息组件

    在导航之前,准备一个TencentCloudChatMessageOptions实例,以指定聊天的会话:
    final messageOptions = TencentCloudChatMessageOptions(
    // 提供userID或groupID,表示聊天的会话。
    userID: "", // 对于一对一聊天,提供另一个用户的userID
    groupID: "", // 对于群聊,提供groupID
    );
    使用一行代码轻松导航
    只需调用navigateToMessage方法即可轻松导航到消息组件:
    /// 使用上面构造的messageOptions
    navigateToMessage(context: context, options: messageOptions);
    手动导航
    如果您需要手动处理导航,将组件包装在自定义页面中,或使用诸如TencentCloudChatMessageController之类的自定义功能,请先实例化一个TencentCloudChatMessage组件。
    
    这将在将消息组件集成到应用程序时为您提供更大的控制和灵活性:
    // 如果您需要使用控制器,请维护一个TencentCloudChatMessageController实例。
    final TencentCloudChatMessageController messageController = TencentCloudChatMessageController();
    
    final message = TencentCloudChatMessage(
    // 一定要提供选项。使用上面构造的messageOptions。
    options: messageOptions,
    
    // 如果您需要使用控制器,请提供一个控制器实例。
    controller: messageController,
    
    // 其他参数,如构建器,可以根据您的需求在此处全局指定或静态传入。有关详细用法,请参阅参数和方法注释。
    );
    您可以将此实例化的组件放置在单独页面的build方法中,或像使用Navigator.push一样直接用于导航。
    如果您使用TencentCloudChatMessageController,建议将其维护在StatefulWidgetState中,使用单个实例来控制组件。有关具体用法,请参阅内部注释。

    定制细节

    您可以使用buildersconfig来定制消息组件的各个方面。这两个选项提供了不同程度的定制,使您能够根据自己的需求定制组件。
    使用config
    对于简单和基本的配置,您可以使用config参数。消息组件的configTencentCloudChatMessageConfig类提供。
    它包括控制各种数据类型的选项,如布尔值、整数和自定义参数。每个控制选项都是一个方法T Function({String? userID, String? groupID}),提供当前会话的userIDgroupID信息。您可以使用这些字段返回适当的配置值。
    这种方法允许您定义一个全局的TencentCloudChatMessageConfig类,在自动导航过程中生效,无需手动实例化一个TencentCloudChatMessage实例并传入。这是因为,在大多数情况下,不同类型的会话需要不同的配置参数。
    下面是一个例子:
    final messageConfig = TencentCloudChatMessageConfig(
    // 演示一个配置选项。
    // 是否在消息列表中显示其他用户的头像。
    showOthersAvatar: ({userID, groupID}){
    if(userID!=null&&userID.isNotEmpty){
    // 如果是一对一聊天,由于头像已经在标题中,所以不显示另一个用户的头像。
    return false;
    }
    // 如果是群聊,显示其他用户的头像。
    return true;
    }
    );
    使用 builders
    对于更深入的UI定制,您可以使用自定义构建器。消息组件的构建器由TencentCloudChatMessageBuilders类提供。
    消息组件提供了一个总体的MessageLayoutBuilder,它进一步分为三个主要构建器:MessageListViewBuilder用于显示消息列表,MessageInputBuilder用于显示消息输入区域,MessageHeaderBuilder用于显示顶部区域。它们基本上都暴露了String? userIDString? groupID参数,帮助您在自动导航过程中根据会话类型确定不同的UI样式,与config相同。
    除此之外,还有更细粒度的构建器来帮助您定制更细节的内容,如消息渲染和消息布局。
    此外,每个构建器都带有所需的参数和方法,使数据和逻辑层方法可以随时使用。例如,`messageInputBuilder`暴露了各种参数,如发送不同类型消息的方法、当前会话详细信息、群组成员列表等。这使您可以专注于输入区域的UI开发,并直接调用我们提供的发送消息的方法,加快您的开发过程。

    Contact

    联系人组件,旨在为您的聊天应用程序提供多功能的联系人列表。
    联系人组件提供一个联系人列表,显示所有已添加联系人,按其姓名首字母排序。它还支持显示其他信息,如已加入的群组列表、被屏蔽用户列表、请求将您添加为联系人的用户和群组消息通知。
    当与tencent_cloud_chat_message组件一起使用时,联系人组件可以在移动和桌面环境下点击联系人或群组时自动导航到相应的消息聊天页面。这种无缝集成确保了您的用户获得顺畅有序的聊天体验。

    开始使用

    导入和声明

    首先,将tencent_cloud_chat_conversation UI模块添加到您的项目中。
    安装完成后,您需要在TencentCloudChat.controller.initUIKit方法的configusedComponentsRegister参数中注册此UI组件。以下是一个例子:
    await TencentCloudChat.controller.initUIKit(
    config: TencentCloudChatConfig(
    usedComponentsRegister: [
    TencentCloudChatContactInstance.register, /// 添加这一行
    /// ...
    ],
    /// ...
    ),
    /// ...
    );

    实例化和使用组件

    使用联系人组件非常简单。只需实例化一个TencentCloudChatContact实例,并在所需页面上渲染它。
    默认情况下,组件将自动获取并显示所有联系人信息,无需任何其他参数。
    您可以在要显示联系人列表的页面的build方法中使用此实例,以及加入群组列表、被屏蔽用户列表、请求将您添加为联系人的用户和群组消息通知的入口。
    @override
    Widget build(BuildContext context) {
    return const TencentCloudChatContact();
    }
    只需几行代码,您就可以轻松地将联系人组件集成到您的聊天应用程序中,供用户与之互动。

    定制细节

    使用 config
    对于简单和基本的配置,您可以使用config参数。联系人组件的configTencentCloudChatContactConfig类提供。
    它包括控制各种数据类型的选项,如布尔值、整数和自定义参数。
    使用 builders
    对于更深入的 UI 定制,您可以使用自定义构建器。联系人组件的构建器由TencentCloudChatContactBuilders类提供。

    User Profile

    说明:
    此模块化 UI 包尚在内测中,如需使用,请联系我们获取源码。谢谢!
    用户资料组件旨在为您的聊天应用程序提供一个详细的用户资料页面。
    该组件不仅显示用户信息,如头像、昵称和其他基本详细信息,还提供了广泛的关系管理和更多功能。
    用户可以为他们的联系人设置备注、添加或删除联系人、屏蔽用户,并执行各种其他操作。该组件还有助于配置会话设置,包括固定会话和管理消息通知。
    tencent_cloud_chat_message 组件集成时,用户资料组件确保在消息和用户资料页面之间无缝导航,无需手动实现导航。
    此外,与 tencent_calls_uikit 搭配使用时,它允许用户直接从用户资料页面发起语音和视频通话,进一步增强整体通信体验。
    凭借其直观的设计和强大的功能,用户资料组件满足了广泛的用户需求和偏好,确保了顺畅而引人入胜的用户体验。

    开始使用

    导入和声明

    首先,将 tencent_cloud_chat_user_profile UI 模块添加到您的项目中。
    安装完成后,您需要在TencentCloudChat.controller.initUIKit方法的configusedComponentsRegister参数中注册此UI组件。以下是一个例子:
    await TencentCloudChat.controller.initUIKit(
    config: TencentCloudChatConfig(
    usedComponentsRegister: [
    TencentCloudChatUserProfileInstance.register, /// 添加这一行
    /// ...
    ],
    /// ...
    ),
    /// ...
    );
    如果您的项目包含模块化组件,例如 tencent_cloud_chat_message 用于显示会话,它们将自动导航到此用户资料组件。
    如果仅需要从这些内置组件而不是从您的自定义页面进行导航,则用户资料组件集成仅需此单步完成。UIKit 在内部处理导航转换,无需手动编码。
    对于需要从自定义页面进行导航的项目,请参阅以下步骤。

    导航到用户资料组件

    在导航之前,准备一个TencentCloudChatUserProfileOptions实例,以指定目标用户:
    final userProfileOptions = TencentCloudChatUserProfileOptions(
    userID: "", // 提供一个用户的 userID
    );
    使用一行代码轻松导航
    只需调用navigateToUserProfile方法即可轻松导航到用户资料组件:
    /// 使用上面构造的userProfileOptions
    navigateToUserProfile(context: context, options: userProfileOptions);
    手动导航
    如果您需要手动处理导航,或将组件包装在自定义页面中,请先实例化一个TencentCloudChatUserProfile组件。
    这将在将用户资料组件集成到应用程序时为您提供更大的控制和灵活性:
    final userProfile = TencentCloudChatUserProfile(
    // 一定要提供选项。使用上面构造的userProfileOptions。
    options: userProfileOptions,
    
    // 其他参数,如构建器,可以根据您的需求在此处全局指定或静态传入。有关详细用法,请参阅参数和方法注释。
    );
    您可以将此实例化的组件放置在单独页面的build方法中,或像使用Navigator.push一样直接用于导航。

    定制细节

    使用 config
    对于简单和基本的配置,您可以使用config参数。联系人组件的configTencentCloudChatUserProfileConfig类提供。
    它包括控制各种数据类型的选项,如布尔值、整数和自定义参数。
    使用 builders
    对于更深入的UI定制,您可以使用自定义构建器。联系人组件的构建器由TencentCloudChatUserProfileBuilders类提供。

    Group Profile

    说明:
    此模块化 UI 包尚在内测中,如需使用,请联系我们获取源码。谢谢!
    这个组件旨在通过详细且互动的群组资料页面,增强您的聊天应用程序。
    群组资料组件提供了群组信息的全面视图,如群组头像、群组 ID、成员列表、群组类型和群组公告等功能。
    除了显示群组信息外,此组件还有助于执行各种群组管理任务。对于群组所有者或管理员,它提供了管理成员列表(包括邀请或删除成员)、编辑群组公告和执行其他群组管理操作(如群组静音)等功能。
    此外,它还允许用户管理与群组相关的会话设置,包括但不限于固定会话、管理消息通知和退出群组聊天。
    当与tencent_cloud_chat_message组件一起使用时,群组资料组件确保在消息和群组资料页面之间无缝导航,无需手动实现导航。
    凭借其直观的设计和强大的功能,群组资料组件满足了广泛的用户需求和偏好,确保了顺畅而引人入胜的群组聊天体验。

    开始使用

    导入和声明

    首先,将 tencent_cloud_chat_group_profile UI 模块添加到您的项目中。
    安装完成后,您需要在TencentCloudChat.controller.initUIKit方法的configusedComponentsRegister参数中注册此 UI 组件。以下是一个例子:
    await TencentCloudChat.controller.initUIKit(
    config: TencentCloudChatConfig(
    usedComponentsRegister: [
    TencentCloudChatGroupProfileInstance.register, /// 添加这一行
    /// ...
    ],
    /// ...
    ),
    /// ...
    );
    如果您的项目包含模块化组件,如tencent_cloud_chat_message用于显示会话,它们将自动导航到此群组资料组件。
    如果仅需要从这些内置组件而不是从您的自定义页面进行导航,则群组资料组件集成仅需此单步完成。UIKit 在内部处理导航转换,无需手动编码。
    对于需要从自定义页面进行导航的项目,请参阅以下步骤。

    导航到群组资料组件

    在导航之前,准备一个TencentCloudChatGroupProfileOptions实例,以指定目标用户:
    final groupProfileOptions = TencentCloudChatGroupProfileOptions(
    groupID: "", // 提供群组ID
    );
    使用一行代码轻松导航
    只需调用navigateToUserProfile方法即可轻松导航到群组资料组件:
    /// 使用上面构造的userProfileOptions
    navigateToGroupProfile(context: context, options: groupProfileOptions);
    手动导航
    如果您需要手动处理导航,或将组件包装在自定义页面中,请先实例化一个TencentCloudChatGroupProfile组件。
    这将在将群组资料组件集成到应用程序时为您提供更大的控制和灵活性:
    final groupProfile = TencentCloudChatGroupProfile(
    // 一定要提供选项。使用上面构造的groupProfileOptions。
    options: groupProfileOptions,
    
    // 其他参数,如构建器,可以根据您的需求在此处全局指定或静态传入。有关详细用法,请参阅参数和方法注释。
    );
    您可以将此实例化的组件放置在单独页面的build方法中,或像使用Navigator.push一样直接用于导航。

    定制细节

    使用 config
    对于简单和基本的配置,您可以使用config参数。群组资料组件的configTencentCloudChatGroupProfileConfig类提供。
    它包括控制各种数据类型的选项,如布尔值、整数和自定义参数。
    使用 builders
    对于更深入的UI定制,您可以使用自定义构建器。群组资料组件的构建器由TencentCloudChatGroupProfileBuilders类提供。

    结语

    我们希望这份文档能帮助您理解我们新的 Flutter IM UIKit 的强大和灵活性。 凭借其模块化设计和广泛的可定制选项,它为构建聊天应用程序提供了全面的解决方案。 其高级功能,如会话管理、消息处理和内置导航转换,使其成为开发人员的强大工具。
    我们期待看到您将用我们的 UIKit 创建的惊人应用程序。如果您有任何问题或需要进一步的信息,请随时联系我们。
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持