跳到主要内容

Flutter IMKit 架构

Flutter IMKit 基于 Provider 状态管理模式设计，分为以下核心服务和组件：

核心服务与组件​

RCKEngineProvider：连接服务。负责管理与 IM 服务器的连接状态，监听连接状态变化，方便 UI 展示连接状态。实际的 IM 连接由 IMLib 底层负责处理。

RCKChatProvider：消息服务。负责管理聊天消息的发送、接收、历史消息加载等功能，同时处理与 UI 交互的各种事件监听，如消息发送状态、已读回执等。

RCKConvoProvider：会话服务。负责管理会话列表，包括会话的获取、更新、置顶、删除等功能，同时处理会话未读数的管理。

RCKMessageInputProvider：输入服务。负责管理消息输入框的状态，处理文本输入、表情输入、多媒体选择等功能。

RCKThemeProvider：主题服务。负责管理 UI 主题配置，包括颜色、字体、间距等样式的统一配置和管理。

RCKVoiceRecordProvider：语音录制服务。负责处理语音消息的录制、播放、状态管理等功能。

主要 UI 组件​

Flutter IMKit 提供了一套完整的 UI 组件，可以快速构建 IM 应用界面：

会话列表相关组件​

  • RCKConvoPage：会话列表页面，展示所有会话
  • ConversationItem：会话列表项组件，展示单个会话信息
  • AvatarWidget：头像组件，用于展示用户或群组头像
  • UnreadBadgeWidget：未读消息角标组件，展示未读消息数量
  • LastMessageWidget：最后一条消息组件，展示会话最新消息内容
  • TitleWidget：标题组件，展示会话标题
  • TimeWidget：时间组件，展示会话最后更新时间
  • RCKConvoAppBarWidget：会话列表顶部导航栏组件

聊天页面相关组件​

  • RCKChatPage：聊天页面，展示消息列表和输入区域
  • RCKMessageList：消息列表组件，负责消息的展示和布局
  • RCKMessageBubble：消息气泡基础组件，用于展示各类消息内容
  • RCKMessageInput：消息输入组件，处理消息编辑和发送
  • RCKChatAppBarWidget：聊天页面顶部导航栏组件

消息气泡组件​

  • TextMessageBubble：文本消息气泡
  • ImageMessageBubble：图片消息气泡
  • VoiceMessageBubble：语音消息气泡
  • FileMessageBubble：文件消息气泡
  • SightMessageBubble：视频消息气泡
  • ReferenceMessageBubble：引用消息气泡
  • NotificationMessageBubble：通知消息气泡

输入区域组件​

  • VoiceRecordButton：语音录制按钮，处理语音消息录制
  • EmojiGridWidget：表情面板，提供表情选择
  • GridButtonWidget：扩展功能网格，提供图片、文件等多媒体消息发送入口

UI 配置与自定义 UI​

Flutter IMKit 提供两层自定义 UI：部分自定义 UI（Config）与完全自定义 UI（Builder）。建议优先使用 Config 快速统一样式，需求超出时使用 Builder 全量覆盖。

如何选择 SDK​

IMLib SDK 与 IMKit SDK 是融云 IM 服务提供的两款核心客户端 SDK，其功能在不同平台间基本保持一致。

  • IMLib：即时通讯（IM）能力库。封装通信核心能力和会话、消息等对象，不含任何 UI 组件。已支持 Android、iOS、Web、Flutter、React Native、Unity、微信小程序等。
  • IMKit：IM 界面库。集成会话界面（UI），提供丰富的自定义功能。已支持 Android、iOS 与 Web（要求使用 Web IMLib 5.x 版本）。
提示

Flutter IMKit SDK 不支持"超级群"。

选择建议：

  • 如需深度集成 IM 能力并完全自定义界面，选择 IMLib SDK（灵活度最高）。
  • 如需快速上线并直接使用成熟的会话 UI，选择 IMKit SDK。可通过 Config/Builder 自定义界面，或使用官方插件扩展能力，显著缩短研发周期。
最后于 更新