自定义消息气泡（Builder 完全自定义 UI）

使用 Builder 可完全控制不同类型消息的气泡渲染，并可在主气泡下方追加自定义 UI 的"附加气泡/面板"（如语音转文字结果）。

自定义 UI 气泡的推荐方式

1. 继承 RCKMessageBubble 实现自定义 UI 的消息类型渲染：

   • 必须实现：Widget buildMessageContent(BuildContext context, String? refName)（核心内容区域）。
   • 可选重写：
     • Widget? buildAppendBubble(BuildContext context)（主气泡下方的附加区域）
     • void onBubbleTap(BuildContext context)（点击默认行为）
   • 父类会统一处理：头像/对齐/时间/多选/侧滑/状态指示器/附加气泡缩进等外层布局，只需关注"内容本身"。

2. 通过 Builder 注册到指定消息类型：

   • 在聊天页将 RCIMIWMessageType 与 CustomChatItemBubbleBuilder 进行映射。
   • 渲染时，RCKMessageBubble.create 会先检查映射表，若有匹配的类型则调用你的 Builder；否则回落到内置的默认气泡（文本/图片/语音/文件/视频/引用/撤回等）。

示例注册：

Dart

RCKChatPage(
  customChatItemBubbleBuilders: {
    RCIMIWMessageType.nativeCustom: ({ required message, showTime, config, required context }) {
      return MyCustomMessageBubble(message: message, showTime: showTime ?? false, config: config);
    },
  },
)

示例：MyCustomMessageBubble（继承 RCKMessageBubble）

Dart

class MyCustomMessageBubble extends RCKMessageBubble {
  const MyCustomMessageBubble({
    super.key,
    required super.message,
    super.showTime,
    super.alignment,
    super.withoutBubble,
    super.withoutName,
    super.config,
    super.onTap,
    super.onDoubleTap,
    super.onLongPress,
    super.onSwipe,
    super.onAppendBubbleTap,
    super.onAppendBubbleLongPress,
  });

  @override
  Widget buildMessageContent(BuildContext context, String? refName) {
    final bool isMe = message.direction == RCIMIWMessageDirection.send;
    String displayText;
    if (message is RCIMIWTextMessage) {
      displayText = (message as RCIMIWTextMessage).text ?? '';
    } else {
      displayText = '[自定义消息]';
    }

    return Text(
      displayText,
      style: isMe
          ? (config?.textStyleConfig.senderTextStyle)
          : (config?.textStyleConfig.receiverTextStyle),
    );
  }

  @override
  Widget? buildAppendBubble(BuildContext context) {
    // 如需在主气泡下追加说明/标签，可在此返回自定义 UI 小面板；不需要则返回 null
    return null;
  }
}

// 将自定义 UI 气泡映射到某个消息类型（示例：原生自定义消息）
final builders = <RCIMIWMessageType, CustomChatItemBubbleBuilder>{
  RCIMIWMessageType.nativeCustom: ({ required message, bool? showTime, RCKBubbleConfig? config, required BuildContext context }) {
    return MyCustomMessageBubble(message: message, showTime: showTime ?? false, config: config);
  },
};

若仅需样式微调，请优先使用 Config，详见：消息气泡配置（Config 部分自定义 UI）