有奖捉虫:行业应用 & 管理与支持文档专题 HOT

TUIKit 介绍

TUIKit 是基于 腾讯云 IM SDK 开发的一款即时通讯 UI 组件库,包括会话、聊天、搜索、关系链、群组、音视频通话等能力。通过 TUIKit,可快速通过一套代码一次开发,集成包含 UI 界面的移动及桌面全平台即时通讯应用
TUIKit 简化了基于 腾讯云 IM SDK 的应用开发过程。它不仅能助您快速实现 UI 功能,也支持调用 腾讯云 IM SDK 相应的接口实现即时通讯业务逻辑和数据处理。因此,您在使用 TUIKit 时仅需关注自身业务或个性化扩展。




支持平台

说明:
TUIKit 拥有自适应 UI 界面,可同时用于 移动端 及 桌面端。并支持以下所有平台,针对不同平台有不同的特色能力。
方便您一套代码开发全平台应用
iOS / Android / Web (二维码) / macOS / Windows / 混合开发(将 Flutter IM SDK 添加至现有原生应用)
单击跳转至对应平台 Demo 下载体验。以上各端 Demo 均由同一项目代码引入 TUIKit 开发编译打包而成。

TUIKit 主要功能组件介绍

TUIKit 按照功能主要分为 聊天、会话列表、关系链管理用户或群组资料搜索音视频通话 等多个类型的 UI 组件,每个类型的 UI 组件负责承载不同的功能模块。
每个组件在移动端和桌面端的用法一致,由 TUIKit 内部做平台自适应。界面效果如下图所示:
移动端
桌面端











消息收发聊天组件

TIMUIKitChat 主要负责消息界面的展示。您可以利用它直接发送不同类型的消息,进行消息表情回应 / 回复 / 引用,并查看消息已读回执详情等操作。
在桌面端,还包括 文件拖入发送 / 截图 / 粘贴图片发送 / 在目录中打开文件 等桌面端特色能力。 界面效果如下图所示:
移动端
桌面端
消息界面
发送多种类型消息






表情回应/回复/引用
文件自动匹配icon






消息已读回执
已读回执详情






群 tips 消息
入群申请审批






链接解析预览
地理位置消息







消息界面整体如图所示,包含了桌面端交互常见的消息收发能力。


移动端Tab 展示的功能外,桌面端还包括一些额外的功能,如下方所述。

截图 或 粘贴图片至发送区域 直接发送图片。


拖入多个文件直接发送。




消息上,鼠标 Hover 菜单。包含 表情回应 / 消息回复 / 转发 及更多能力。




消息上,鼠标右键菜单。包含更多消息操作,如 复制 / 多选 / 删除 / 翻译 / 撤回 等。



文件消息支持在右键菜单中 直接打开 或 打开所在目录。也可点击消息 item 直接打开。



群聊中 @ 其他群成员。在群成员选择面板中,可渐进式输入搜索并选择群成员。被 @ 的群成员可收到特别提醒。




历史消息盒子。支持关键词搜索。




消息多选。



关系链系列组件

关系链主要负责当前用户的联系人、群聊、黑名单的信息展示。界面效果如下图所示:
移动端
桌面端
联系人列表(TIMUIKitContact)
好友申请列表(TIMUIKitNewContact)






参与的群聊列表(TIMUIKitGroup)
黑名单列表(TIMUIKitBlackList)







联系人列表 - TIMTUIKitContact


群组列表 - TIMUIKitGroup


黑名单列表 - TIMUIKitBlackList


好友申请列表 - TIMUIKitNewContact



会话列表组件

TIMUIKitConversation 主要负责会话列表的展示和编辑。界面效果如下图所示:
移动端
桌面端



会话列表。当前选中会话 / 置顶的会话 / 未选中会话 分别用不同颜色展示。


右键操作菜单。包含 清空所有消息 / 会话置顶 / 删除会话 等能力。





用户资料与管理组件

TIMUIKitProfile 主要负责联系人的资料展示与管理。界面效果如下图所示:
移动端
桌面端



TIMUIKitProfile 组件在桌面端有两种展示方式布局,小卡片展示 及 联系人详情页。分别用于不同场景。

小卡片展示。用于 单聊标题点击 / 群聊其他成员头像点击 等场景。




联系人详情页。



添加好友与群组系列组件

TIMUIKitAddFriend 为添加好友页面。TIMUIKitAddGroup 为添加群组页面。界面效果如下图所示:
移动端
桌面端

添加好友页面(TIMUIKitAddFriend)
添加群组页面(TIMUIKitAddGroup)







添加好友 - TIMUIKitAddFriend




添加群组 - TIMUIKitAddGroup




群资料与管理组件

TIMUIKitGroupProfile 主要负责群资料、群成员、群组权限的展示与管理。界面效果如下图所示:
移动端
桌面端
群资料及管理
群成员管理






加群方式管理
群操作







群资料及管理。可展示在群聊右侧,和移动端功能保持一致,只是界面 UI 不同。


群成员管理。可在群成员卡片中查看全部群成员,并操作群成员增减。点开群成员管理面板后,可配置 管理员 / 群成员禁言 / 全员禁言 等信息。


群公告编辑。点击群公告卡片,即可将其变为输入框,进行群公告编辑并发布。



本地搜索系列组件

本地搜索能力,共包括两个不同的组件 TIMUIKitSearchTIMUIKitSearchMsgDetail
TIMUIKitSearch 为本地全局搜索,支持同时搜索联系人、群聊及聊天记录;TIMUIKitSearchMsgDetail 为会话内聊天历史记录搜索。
移动端
桌面端
全局搜索 - TIMUIKitSearch



会话内搜索 - TIMUIKitSearchMsgDetail



全局搜索 - TIMUIKitSearch


会话内搜索 - TIMUIKitSearchMsgDetail



音视频通话

TUICallKit插件 用于语音、视频通话。目前仅支持移动端。



集成 Callkit 插件后,TUIKit 的消息发送更多能力面板中,会自动出现拨打音视频电话的 button。




消息推送

您可通过我们的 Flutter 推送插件 集成消息推送能力,涵盖离线推送与在线推送。消息推送效果如下图所示:




联系我们

点此进入IM社群,享有专业工程师的支持,解决您的难题