• UIKit
  • SDK
  • 服务端 API
Chat/
UIKit/
Flutter/
UIKit
  • 产品概述
  • 跑通Demo
  • 安装
    • 集成
    • Only Chat
  • 产品特性
    • 局部搜索
    • 离线推送
    • 在线状态
    • 输入状态
    • 消息已读回执
    • 消息反应
    • 国际化
    • 添加自定义消息
    • 表情和贴纸
  • 定制
    • 修改 UI 主题
    • 设置 UI 样式
  • Changelog
  • 开发指引
  • 控制台指南
    • 创建和升级应用
    • 基本配置
    • 功能配置
    • 账号管理
    • 群组管理
    • 回调配置
  • 产品介绍
    • 消息管理
      • 单聊消息
      • 消息存储
      • 离线推送
      • 群消息
      • 消息格式
    • 账号系统
      • 登陆验证
      • 在线状态管理
    • 群相关
      • 群组系统
      • 群组管理
    • 用户资料和关系链
      • 资料管理
      • 关系链管理
  • 购买指南
    • 计费概述
    • 价格中心
  • 错误码

产品概述

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 内部做平台自适应。
界面效果如下图所示:
移动端
桌面端

b3d5bba6d133d3a0f3a4fa7534037f01.png


33d706da1fd69cbe92c7dd95357f9486.png








消息收发聊天组件

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插件 用于语音、视频通话。目前仅支持移动端。




消息推送

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