聊天页面（Builder 完全自定义 UI）

当 Config 无法满足需求时，可使用 Builder 完全自定义聊天页面的部分区域：AppBar、消息气泡、吸顶区等。下文列出可用 Builder 类型及其回调签名，并提供示例。

提示

由于消息列表与输入框的逻辑较为复杂，Flutter IMKit 暂不提供通过页面参数直接进行“完全自定义”的入口。若需深度自定义：

• 方式一：继承 RCKChatPage，在子类中增加所需的 Builder 入口；
• 方式二：改用 Flutter IMLib，自行实现完整的页面与交互。

入口组件

• 组件：RCKChatPage
• 可用 Builders：
  • ChatAppBarBuilder
  • Map<RCIMIWMessageType, CustomChatItemBubbleBuilder>（按消息类型注册气泡渲染）
  • stickyHeaderBuilder（吸顶区）

回调签名参考

• 自定义消息气泡（按类型）：
  • CustomChatItemBubbleBuilder = RCKMessageBubble Function({ required RCIMIWMessage message, bool? showTime, RCKBubbleConfig? config, required BuildContext context })
• 消息交互回调：
  • MessageTapCallback = void Function(RCIMIWMessage message, BuildContext context)
  • MessageDoubleTapCallback = void Function(RCIMIWMessage message, BuildContext context)
  • MessageLongPressCallback = bool Function(RCIMIWMessage message, BuildContext context)（返回 true 表示拦截默认处理）
  • MessageSwipeCallback = void Function(RCIMIWMessage message, BuildContext context, SwipeDirection direction)

示例：自定义 UI 消息气泡

convo_page.dart

RCKMessageBubble customChatItemBubbleBuilders({
  required RCIMIWMessage message,
  bool? showTime,
  RCKBubbleConfig? config,
  required BuildContext context,
}) {
  if (message.messageType == RCIMIWMessageType.nativeCustom) {
    return NativeCustomMessageBubble(
      message: message,
      showTime: showTime ?? false,
      alignment: Alignment.center,
      withoutBubble: true,
      config: config,
    );
  }
  return RCKTextMessageBubble(message: message, showTime: showTime ?? false);
}

注册到聊天页：

example

RCKChatPage(
  customChatItemBubbleBuilders: {
    RCIMIWMessageType.nativeCustom: customChatItemBubbleBuilders,
  },
)

示例：自定义 UI AppBar 与吸顶区

chat_page.dart

appBar: widget.appBarBuilder?.call(context, widget.config.appBarConfig)
  ?? RCKChatAppBarWidget(config: widget.config.appBarConfig, ...),

// 吸顶区
RCKMessageList(
  stickyHeaderBuilder: widget.stickyHeaderBuilder,
)

若仅需修改样式而非结构，优先使用 Config，详见：聊天页面配置（Config 部分自定义 UI）