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核心功能的同时，打造符合应用品牌风格和交互需求的聊天界面。