跳到主要内容

Flutter IMKit 架构

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

核心服务与组件​

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

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

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

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

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

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

主要UI组件​

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

会话列表相关组件​

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

聊天页面相关组件​

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

消息气泡组件​

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

输入区域组件​

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

UI配置与自定义​

Flutter IMKit提供了两层自定义机制，让开发者能够根据需求灵活定制 UI 界面和交互行为。

部分自定义​

部分自定义主要通过两种方式实现：

  1. Config配置类：在组件初始化时传入的配置对象，用于设置组件的样式、布局和不可变属性。Config 类的嵌套结构与 UI 组件树保持一致。

  2. 回调事件：通过在组件初始化时传入的回调函数，处理用户交互事件。

主要配置类​

配置类描述主要属性
RCKConvoConfig会话列表整体配置包含列表样式、布局、项目样式等
RCKConvoAppBarConfig会话列表顶部导航栏配置背景色、标题样式、操作按钮等
RCKChatPageConfig聊天页面整体配置背景色、布局、输入区域等
RCKBubbleConfig消息气泡配置背景色、边框、圆角、文本样式等
RCKMessageInputConfig输入框配置输入区域样式、功能按钮、扩展菜单等
RCKExtensionMenuConfig扩展菜单配置菜单项、图标、布局等

示例：使用Config配置会话列表

Dart
ConversationPage(
  config: RCKConvoConfig(
    appBarConfig: RCKConvoAppBarConfig(
      titleConfig: AppbarTitleConfig(
        title: '我的会话',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    ),
    avatarConfig: RCKAvatarConfig(
      size: 50,
      shape: AvatarShape.circle,
    ),
    unreadBadgeConfig: RCKUnreadBadgeConfig(
      backgroundColor: Colors.red,
      textStyle: TextStyle(color: Colors.white),
    ),
  ),
)

完全自定义​

完全自定义通过 Builder 函数实现，允许开发者完全控制组件的渲染方式，无需依赖默认实现。

主要Builder接口​

Builder类型描述位置
ConvoAppBarBuilder自定义会话列表顶部导航栏ConversationPage
ItemBuilder自定义会话列表项ConversationPage
AvatarBuilder自定义头像渲染ConversationPage/ConversationItem
TitleBuilder自定义标题渲染ConversationPage/ConversationItem
LastMessageBuilder自定义最后一条消息渲染ConversationPage/ConversationItem
TimeBuilder自定义时间渲染ConversationPage/ConversationItem
UnreadBadgeBuilder自定义未读数角标渲染ConversationPage/ConversationItem
Map<RCIMIWMessageType, Widget Function(...)>自定义消息气泡渲染ChatPage

示例：使用Builder自定义会话列表项

Dart
ConversationPage(
  // 完全自定义会话项
  itemBuilder: (context, conversation, config) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(conversation.portraitUrl ?? ''),
      ),
      title: Text(conversation.name ?? '未命名会话'),
      subtitle: Text(conversation.lastMessage?.conversationDigest ?? ''),
      trailing: Column(
        children: [
          Text(conversation.formattedTime ?? ''),
          if (conversation.unreadCount > 0)
            CircleAvatar(
              radius: 10,
              backgroundColor: Colors.red,
              child: Text('${conversation.unreadCount}'),
            ),
        ],
      ),
    );
  },
  
  // 自定义头像（局部自定义）
  avatarBuilder: (context, conversation, config) {
    return CircleAvatar(
      backgroundImage: NetworkImage(conversation.portraitUrl ?? ''),
      radius: 25,
    );
  },
)

示例：自定义聊天气泡

Dart
ChatPage(
  // 为不同类型的消息注册自定义气泡渲染器
  customChatItemBubbleBuilders: {
    RCIMIWMessageType.text: (context, message, isMe, config) {
      return Container(
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: isMe ? Colors.blue[100] : Colors.grey[200],
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(
          (message as RCIMIWTextMessage).text ?? '',
          style: TextStyle(color: Colors.black87),
        ),
      );
    },
    
    RCIMIWMessageType.image: (context, message, isMe, config) {
      // 自定义图片消息渲染
      // ...
    },
  },
)

通过灵活结合部分自定义和完全自定义，开发者可以在保留IMKit核心功能的同时，打造符合应用品牌风格和交互需求的聊天界面。

最后于 更新