tencent cloud

文档反馈

最后更新时间:2024-07-30 15:48:43
    Flutter Chat UIKit 旨在为开发者提供一整套工具,轻松创建功能丰富的聊天应用程序。
    它采用模块化方法构建,允许您选择所需的组件,同时保持应用程序轻量级和高效。
    UIKit 包括多种功能,例如会话列表消息处理联系人列表、用户和群组资料、搜索功能等。
    

    特点

    1. 个性化外观:内置深色和浅色模式,UIKit 提供多种主题和外观定制选项,以满足您的业务需求。
    2. 多平台兼容性:适应性单一代码库确保了在不同平台上的兼容性,包括移动设备(iOS/Android)、平板电脑(iPad和Android平板电脑)、Web浏览器和桌面环境(Windows/macOS)。
    3. 本地化支持:开发时支持英语和其他语言选项,包括阿拉伯语、日语、韩语、简体中文和繁体中文。国际化功能确保本地化界面语言,并支持自定义和补充语言,阿拉伯语支持 RTL UI。
    4. 性能提升:UIKit 提供了更好的消息列表性能内存使用和精确的消息定位功能,适用于大量消息和导航到旧消息的场景。
    5. 高级功能:UIKit 拥有众多高级功能,包括连续语音消息播放、增强的多媒体和文件消息体验以及直观的左右滑动多媒体消息预览。
    6. 优化用户体验:丰富的动画触觉反馈精美的界面等细节优化有助于提升用户体验。新功能例如网格样式头像、重新设计的转发面板、群组成员选择器和重新设计的长按消息菜单进一步丰富了体验。
    7. 模块化设计:组件按模块化包组织,允许选择性导入并减少不必要的膨胀。每个包支持内置导航过渡,通过自动处理过渡(例如会话和消息之间的过渡)简化开发和集成。
    8. 开发者友好的方法:更统一、标准化的组件参数设计,更清晰的代码命名规范和详细的注释,结合选择全局或实例级配置管理的灵活性,使开发更加简单高效。

    快速开始

    要求

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

    在控制台中设置应用程序

    步骤1:创建账户

    访问 控制台 并按照提示创建账户。

    步骤2:开始免费试用

    在首页上创建一个应用程序并开始免费试用。
    

    步骤3:生成测试用户

    账户管理上创建两个用户(测试帐户)。然后使用 UserSig 工具为它们创建相应的 UserSigs,记下 UserSigs 以备后用。
    

    步骤3:记录 SDKAppID

    转到应用程序,选择您刚刚创建的应用程序,然后导航到相应的 应用程序概述 以找到您的 SDKAppID。
    
    此时,控制台设置已完成。请务必记下SDKAppID和两组UserIDUserSig

    编码

    说明:
    本指南仅提供与Flutter Chat UIKit集成的最简化概述
    有关详细完整的集成过程,请参阅本指南:详细集成指南
    首先,最好准备好一个Flutter项目,或者创建一个新的项目以充分体验本教程。我们建议按照创建新的Flutter项目的步骤进行操作。
    此外,接下来的步骤涉及客户端项目和代码操作。为了增强您的理解,您可以参考稍后展示的简化集成项目的源代码,该项目可在GitHub仓库上找到。 注意:此源代码仓库仅用于展示简化集成目的,供以下教程使用。 如果您对探索功能齐全、具有广泛功能、高级功能和定制选项的应用程序感兴趣,请查看此仓库

    步骤1. 导入包

    首先,导入基础包tencent_cloud_chat
    flutter pub add tencent_cloud_chat
    接下来,根据您的需求导入 UI 组件包:
    flutter pub add tencent_cloud_chat_message
    flutter pub add tencent_cloud_chat_conversation
    flutter pub add tencent_cloud_chat_contact
    flutter pub add tencent_cloud_chat_user_profile
    flutter pub add tencent_cloud_chat_group_profile
    为了演示目的,我们建议导入所有组件包。然而,在实际项目中,您可以根据具体需求导入包。
    Flutter Chat UIKit 的架构如下所示:
    

    步骤2. 为 UIKit 进行初始设置

    在开始使用每个模块化包 UI 组件之前,请按照以下初始设置步骤操作:
    全局配置
    TencentCloudChatMaterialApp替换项目中的MaterialApp
    这可以自动管理和配置语言、主题(包括 material3)、主题模式和其他设置。如果您喜欢手动配置,请参见 手动实现UIKit的全局配置
    初始化和登录
    调用TencentCloudChat.controller.initUIKit进行初始化和登录。
    传入您的腾讯云聊天应用的sdkAppIDuserIDuserSig。同时,在usedComponentsRegister列表中声明每个子模块 UI 包的注册。
    TencentCloudChat.controller.initUIKit(
    options: const TencentCloudChatInitOptions(
    sdkAppID: , /// [必需]:您的腾讯云聊天应用的SDKAppID
    userID: , /// [必需]:已登录用户的userID
    userSig: , /// [必需]:已登录用户的userSig
    ),
    components: const TencentCloudChatInitComponentsRelated( /// [必需]:模块化UI组件相关设置,在全局范围内生效。
    usedComponentsRegister: [
    /// [必需]:聊天UIKit中使用的组件的注册函数列表。
    TencentCloudChatConversationManager.register,
    TencentCloudChatMessageManager.register,
    TencentCloudChatUserProfileManager.register,
    TencentCloudChatGroupProfileManager.register,
    TencentCloudChatContactManager.register,
    ],
    ),
    );
    全局配置完成后,我们现在可以深入了解模块化 UI 组件的使用。让我们探讨它们如何增强您的聊天应用程序体验。

    步骤3. 集成模块化UI组件

    在大多数使用场景中,您需要手动实例化并将TencentCloudChatConversationTencentCloudChatContact组件添加到一个小部件中(如果需要)。
    其他组件会根据用户操作自动导航。
    在本教程中,我们将使用bottomNavigationBar来管理页面,并在TencentCloudChatConversationTencentCloudChatContact组件之间切换。
    首先,声明一个currentIndex变量和一个List<Widget> pages数组,以表示当前选择的组件并存储组件实例。
    List<Widget> pages = [];
    int currentIndex = 0;
    将实例存储在pages数组中。
    pages = [
    const TencentCloudChatConversation(),
    const TencentCloudChatContact(),
    ];
    最后,修改build方法如下:
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    currentIndex: currentIndex,
    onTap: (index) async {
    if (index != currentIndex) {
    setState(
    () {
    currentIndex = index;
    },
    );
    }
    },
    items: const [
    BottomNavigationBarItem(
    icon: Icon(Icons.chat_bubble_outline), label: "Chats"),
    BottomNavigationBarItem(
    icon: Icon(Icons.contacts), label: "Contacts"),
    ],
    ),
    body: pages[currentIndex],
    );
    }
    就是这样!您已成功集成了组件。
    回顾一下,您可以在 GitHub 仓库 上查看简化集成代码。

    步骤4. 体验 Flutter Chat UIKit 的实际效果

    现在,让我们运行项目并体验 Flutter Chat UIKit。
    使用在initUIKit方法中创建的第一个测试账户登录并启动应用。
    首先运行flutter run
    注意:
    如果您遇到 iOS 无法运行Android SDK 版本不匹配 的问题,请参考我们的 示例应用程序仓库 并选择合适的版本配置。
    成功进入应用程序后,您将看到会话和联系人页面,底部可以在它们之间切换。
    然而,还没有对话可以测试。
    别担心!切换到联系人页面,点击右上角的“添加联系人”,然后将另一个测试账户添加为联系人。您现在可以在联系人列表中看到另一个账户。
    
    点击联系人开始聊天。您还可以重新运行应用程序,使用另一个用户的 UserID 登录,并体验互相发送消息。
    总之,我们现在已经完成了整个简化集成过程。感谢您体验腾讯云 Flutter Chat UIKit 的强大功能。
    有关详细集成、配置和高级用法的更多信息,请参见本指南:详细集成指南
    联系我们

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

    技术支持

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

    7x24 电话支持