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

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

入口组件

• 组件：RCKChatPage
• 可用 Builders：
  • ChatAppBarBuilder
  • Map<RCIMIWMessageType, CustomChatItemBubbleBuilder>（按消息类型注册气泡渲染）
  • stickyHeaderBuilder（吸顶区）
  • RCKMessageInput 的 left/right/top/bottom/emoji/grid Builders（输入区子面板）

回调签名参考

• 自定义消息气泡（按类型）：
  • 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)
• 输入区子面板：
  • LeftButtonBuilder/RightButtonBuilder/TopButtonsBuilder/BottomButtonsBuilder
  • emojiBuilder(BuildContext, void Function(String) onInsert, VoidCallback onDelete, VoidCallback onSend)
  • gridBuilder(BuildContext)

示例：自定义 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,
)

示例：完全自定义 UI 输入区域子面板

message_input_widget.dart

RCKMessageInput(
  leftButtonBuilder: (context, type, toggle) => MyLeftButton(...),
  rightButtonBuilder: (context, type, toggle) => MyRightButtons(...),
  emojiBuilder: (ctx, onInsert, onDelete, onSend) => MyEmojiPanel(...),
  gridBuilder: (ctx) => MyExtensionGrid(...),
)

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