跳到主要内容

聊天页面（Config 部分自定义 UI）

聊天页面通过 RCKChatPageConfig 进行部分自定义 UI，覆盖 AppBar、消息气泡、聊天背景、输入区与默认返回按钮等。以下列出所有配置项与其子配置字段说明，并提供使用示例。

入口组件​

  • 组件：RCKChatPage
  • 配置：RCKChatPageConfig

总览：RCKChatPageConfig（聊天页面整体配置）​

  • appBarConfig（RCKChatAppBarConfig）：顶部导航栏配置
  • bubbleConfig（RCKBubbleConfig?）：消息气泡样式（文本/图片/语音/视频/文件等子样式）
  • backgroundConfig（RCKChatBackgroundConfig）：聊天背景（颜色/图片/适配模式/重复）
  • inputConfig（RCKMessageInputConfig?）：输入区域配置（按钮、表情、扩展菜单等）
  • useDefaultAppBarLeading（bool）：是否使用默认返回按钮与未读角标行为

AppBar 配置（RCKChatAppBarConfig 及子项）​

  • height（double）：AppBar 高度（默认 56）
  • padding（EdgeInsets）：内边距
  • centerTitle（bool）：标题是否居中（默认 true）
  • automaticallyImplyLeading（bool）：是否自动添加返回按钮（默认 true）
  • backgroundConfig（RCKBackgroundConfig）：背景（颜色/图片/渐变/边框/圆角/阴影）
  • leadingConfig（RCKLeadingConfig）：左侧区域（图标、文本、文本样式、间距、内边距）
  • titleConfig（RCKChatTitleConfig）：标题文本/样式、前后缀图标、间距、对齐、内边距
  • actionsConfig（RCKActionsConfig）：右侧操作按钮列表、间距、内边距

RCKBackgroundConfig 字段：color、image（DecorationImage）、gradient、border、borderRadius、boxShadow。

RCKLeadingConfig 字段：icon（Widget?）、text（String?）、textStyle、spacing、padding。

RCKChatTitleConfig 字段：text（String?）、textStyle、prefixIcon、suffixIcon、spacing、alignment（MainAxisAlignment）、padding。

RCKActionsConfig 字段：items（List<RCKActionItem>）、spacing、padding。

RCKActionItem 字段：icon（Widget，必填）、text（String?）、textStyle、spacing、padding。

示例：

Dart
RCKChatPage(
  config: RCKChatPageConfig(
    appBarConfig: const RCKChatAppBarConfig(
      titleConfig: RCKChatTitleConfig(text: '聊天'),
    ),
  ),
)

聊天背景配置（RCKChatBackgroundConfig）​

  • backgroundColor（Color?）：背景颜色（当未设置背景图时使用）。
  • safeAreaColor（Color?）：非安全区背景颜色（随主题）。
  • backgroundImage（ImageProvider?）：本地资源图片。
  • backgroundImageUrl（String?）：网络图片 URL。
  • imageFitMode（BoxFit）：图片适配模式（默认 cover）。
  • imageRepeat（ImageRepeat）：图片是否平铺（默认不平铺）。

示例：

Dart
RCKChatPageConfig(
  backgroundConfig: RCKChatBackgroundConfig(
    backgroundImageUrl: 'https://example.com/bg.jpg',
    imageFitMode: BoxFit.cover,
  ),
)

消息气泡配置（RCKBubbleConfig）​

详见：消息气泡配置。

输入区域配置（RCKMessageInputConfig）​

详见：输入区域配置。

默认返回按钮与未读角标​

  • useDefaultAppBarLeading（bool）：设为 true 时，使用内置返回按钮与未读角标逻辑；设为 false 时可结合 AppBar Builder 自定义。

示例：

Dart
RCKChatPageConfig(useDefaultAppBarLeading: true)

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

Dart
RCKChatPage(
  config: RCKChatPageConfig(
    appBarConfig: const RCKChatAppBarConfig(
      titleConfig: RCKChatTitleConfig(text: '聊天'),
    ),
    backgroundConfig: RCKChatBackgroundConfig(
      backgroundImageUrl: 'https://example.com/bg.jpg',
    ),
    bubbleConfig: RCKBubbleConfig(),
    inputConfig: RCKMessageInputConfig(),
    useDefaultAppBarLeading: true,
  ),
)

子配置详解请参见对应页面：消息气泡配置、输入区域配置

最后于 更新