TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、搜索、关系链、群组、音视频通话等功能。
基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
TUIKit 中的组件在实现 UI 功能的同时,会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理,因而开发者在使用 TUIKit 时只需关注自身业务或个性化扩展即可。
平台 | 支持状态 |
---|---|
iOS | 支持 |
Android | 支持 |
Web | 支持,0.1.5版本起 |
macOS | 开发中,敬请期待 |
Windows | 开发中,敬请期待 |
混合开发 (将 Flutter SDK 添加至现有原生应用) | 1.0.0版本起支持 |
说明:我们致力于打造一套支持 Flutter 全平台的即时通信 IM SDK 及 TUIKit,帮助您一套代码,全平台运行。
您可以通过我们的 DEMO,快速在线体验 TUIKit 各项能力。
以下各版本 DEMO,均由同一 Flutter 项目引入TUIKit 制作打包而成。
移动端 APP | WEB - H5 |
---|---|
iOS/Android APP,自动判断平台下载 ![]() |
手机扫码体验在线 Web 版 DEMO ![]() |
TUIKit 按照功能主要分为聊天、关系链、用户或群组资料、搜索、语音几个类型的 UI 组件,每个类型的 UI 组件负责展示不同的内容。具体的 UI 组件描述如下表所示:
组件名 | 组件功能 |
---|---|
TIMUIKitConversation | 会话列表组件 |
TIMUIKitChat | 核心聊天组件 |
TIMUIKitAddFriend / TIMUIKitAddGroup | 添加好友 及 添加群组 组件 |
TIMUIKitBlackList / TIMUIKitNewContact | 黑名单列表 及 新的联系人申请列表 组件 |
TIMUIKitContact / TIMUIKitGroup | 好友列表 及 群组列表 组件 |
TIMUIKitProfile / TIMUIKitGroupProfile | 用户信息 及 群组信息 组件 |
TIMUIKitSearch / TIMUIKitSearchMsgDetail | 全局搜索/会话内搜索组件 |
音视频通话插件 | 单聊or群聊 的 语音通话&视频通话 |
消息推送插件 | 接入厂商的离线推送 & 本地在线推送 |
界面效果如下图所示:
TIMUIKitChat 主要负责消息界面的展示。您可以利用它直接发送不同类型的消息,进行消息表情回应/回复/引用、查询消息已读回执详情等。
界面效果如下图所示:
消息界面 | 发送多种类型消息 |
---|---|
![]() |
![]() |
表情回应/回复/引用 | 文件自动匹配icon |
---|---|
![]() |
![]() |
消息已读回执 | 已读回执详情 |
---|---|
![]() |
![]() |
群tips消息 | 入群申请审批 |
---|---|
![]() |
![]() |
链接解析 | 地理位置消息 |
---|---|
![]() |
![]() |
关系链主要负责当前用户的联系人、群聊、黑名单的信息展示。
界面效果如下图所示:
联系人列表(TIMUIKitContact) | 新的联系人列表(TIMUIKitNewContact) |
---|---|
![]() |
![]() |
参与的群聊列表(TIMUIKitGroup) | 黑名单列表(TIMUIKitBlackList) |
---|---|
![]() |
![]() |
TIMUIKitConversation 主要负责会话列表的展示和编辑。
界面效果如下图所示:
TIMUIKitProfile 主要负责联系人的资料展示与管理。
界面效果如下图所示:
TIMUIKitAddFriend 为添加好友页面。
TIMUIKitAddGroup 为添加群组页面。
界面效果如下图所示:
添加好友页面(TIMUIKitAddFriend) | 添加群组页面(TIMUIKitAddGroup) |
---|---|
![]() |
![]() |
TIMUIKitGroupProfile 主要负责群资料、群成员、群组权限的展示与管理。
界面效果如下图所示:
群资料及管理 | 群成员管理 |
---|---|
![]() |
![]() |
加群方式管理 | 群操作 |
---|---|
![]() |
![]() |
TIMUIKitSearch 为本地全局搜索,支持搜索联系人、群聊、聊天记录。
TIMUIKitSearchMsgDetail 为会话内聊天历史记录搜索。
详情 可查看此文档,界面效果如下图所示:
您可以在 TIMUIKitChat 消息页、TIMUIKitProfile 个人资料页等页面启动语音、视频通话。
界面效果如下图所示:
消息页启动 | 资料页启动 |
---|---|
![]() |
![]() |
您可通过我们的 Flutter 推送插件 集成消息推送能力,涵盖离线推送与在线推送。
消息推送效果如下图所示:
本页内容是否解决了您的问题?