跳到主要内容

消息气泡（Config 部分自定义 UI）

消息气泡通过 RCKBubbleConfig 进行部分自定义 UI，包括形状、颜色、边框、内边距，以及文本/链接/图片/语音/视频/文件/引用与“追加气泡（附加面板）”的子样式。以下完整列出字段与子配置，并给出使用示例。

入口​

  • 配置：RCKBubbleConfig
  • 使用位置：RCKChatPage.config.bubbleConfig → 传入 RCKMessageList

主配置：RCKBubbleConfig​

  • shape（BubbleShape）：形状，可选roundedRectangle、oval、rectangle
  • borderRadius（double）：圆角大小（用于圆角矩形）
  • senderColor、receiverColor（Color）：发送/接收方气泡背景色
  • systemColor（Color）：系统消息背景色
  • messageTypeColors（Map<RCIMIWMessageType, Color>?）：按消息类型指定颜色
  • borderColor、borderWidth（Color?/double?）：边框颜色与宽度
  • padding（EdgeInsetsGeometry）：气泡内边距
  • 文本/链接/图片/语音/视频/文件/引用/追加气泡的子样式配置：
    • textStyleConfig（RCKTextStyleConfig）
    • linkStyleConfig（RCKLinkStyleConfig）
    • imageStyleConfig（RCKImageStyleConfig）
    • voiceStyleConfig（RCKVoiceStyleConfig）
    • sightStyleConfig（RCKSightStyleConfig）
    • fileStyleConfig（RCKFileStyleConfig）
    • referenceStyleConfig（RCKReferenceStyleConfig）
    • appendBubbleConfig（RCKAppendBubbleConfig）

颜色的最终选择由 getBubbleColor 结合消息类型与方向计算：若为文件或系统类消息，会有特定覆盖逻辑。

文本样式（RCKTextStyleConfig）​

  • senderTextStyle、receiverTextStyle（TextStyle?）：发送/接收方文本样式
  • lineSpacing（double?）：行间距

示例：

Dart
textStyleConfig: RCKTextStyleConfig(
  senderTextStyle: const TextStyle(fontSize: 16),
)

链接样式（RCKLinkStyleConfig）​

  • senderTextStyle、receiverTextStyle（TextStyle?）：发送/接收方链接文本样式
  • showUnderline（bool）：是否显示下划线

示例：

Dart
linkStyleConfig: const RCKLinkStyleConfig(showUnderline: false)

图片样式（RCKImageStyleConfig）​

  • fit（BoxFit）：图片适应方式（默认 contain）
  • maxWidth、maxHeight（double?）：最大宽高（默认 200）
  • scale（double）：缩放比
  • borderRadius（double）：圆角半径

示例：

Dart
imageStyleConfig: const RCKImageStyleConfig(maxWidth: 220, maxHeight: 220)

语音样式（RCKVoiceStyleConfig）​

  • iconSize（double）：播放图标尺寸
  • playingColor、notPlayingColor（Color?）：播放/未播放图标颜色
  • customPlayingIconPath、customNotPlayingIconPath（String?）：自定义播放/未播放动态图标路径
  • durationTextStyle（TextStyle?）：时长文本样式

示例：

Dart
voiceStyleConfig: const RCKVoiceStyleConfig(iconSize: 22)

文件样式（RCKFileStyleConfig）​

  • iconSize（double）：文件图标尺寸。
  • fileNameStyle、fileSizeStyle（TextStyle）：文件名/大小样式
  • customFileIconPath（String?）：自定义图标路径
  • containerWidth、containerHeight（double）：容器尺寸

示例：

Dart
fileStyleConfig: RCKFileStyleConfig(containerWidth: 220)

视频样式（RCKSightStyleConfig）​

  • maxWidth、maxHeight（double?）：缩略图最大宽高
  • playButtonSize（double）：播放按钮大小
  • playButtonColor（Color?）：播放按钮颜色
  • customPlayButtonIconPath（String?）：自定义播放按钮图标路径

示例：

Dart
sightStyleConfig: const RCKSightStyleConfig(playButtonSize: 28)

引用样式（RCKReferenceStyleConfig）​

  • backgroundColor（Color?）：引用背景色
  • textStyle（TextStyle?）：引用文本样式
  • padding（EdgeInsets）：引用内边距
  • spacingToContent（double）：引用与主内容的间距

示例：

Dart
referenceStyleConfig: const RCKReferenceStyleConfig(padding: EdgeInsets.all(6))

追加气泡样式（RCKAppendBubbleConfig）​

  • spacingToMain（double）：与主气泡的垂直间距
  • padding（EdgeInsets）：内边距
  • backgroundColor（Color?）：背景色（为 null 则仅包裹内边距）
  • borderRadius（double）：圆角
  • borderColor、borderWidth（Color?/double?）：边框颜色与宽度

用途示例（语音转文字附加面板）：

Dart
appendBubbleConfig: const RCKAppendBubbleConfig(
  spacingToMain: 6.0,
  padding: EdgeInsets.all(10),
)

综合示例（推荐起步配置）​

Dart
RCKBubbleConfig(
  shape: BubbleShape.roundedRectangle,
  borderRadius: 12,
  senderColor: Colors.blue.shade50,
  receiverColor: Colors.white,
  borderColor: Colors.blueGrey.shade100,
  borderWidth: 0.5,
  textStyleConfig: RCKTextStyleConfig(),
  linkStyleConfig: const RCKLinkStyleConfig(showUnderline: false),
  imageStyleConfig: const RCKImageStyleConfig(maxWidth: 220, maxHeight: 220),
  voiceStyleConfig: const RCKVoiceStyleConfig(iconSize: 22),
  sightStyleConfig: const RCKSightStyleConfig(playButtonSize: 28),
  fileStyleConfig: RCKFileStyleConfig(containerWidth: 220),
  referenceStyleConfig: const RCKReferenceStyleConfig(padding: EdgeInsets.all(6)),
  appendBubbleConfig: const RCKAppendBubbleConfig(spacingToMain: 6.0),
)

若需对某类消息完全改造气泡内容，请改用 Builder，详见：自定义 UI 消息气泡与附加气泡

最后于 更新