跳到主要内容

输入区域（Config 部分自定义 UI）

输入区域通过 RCKMessageInputConfig 进行部分自定义 UI，覆盖输入框、按钮组（左/右/上/下）、表情面板、语音录制、引用预览、扩展菜单、背景与分割线等。以下为所有可用配置与字段说明，并提供面向开发者的使用示例。

入口​

  • 组件：RCKMessageInput
  • 配置：RCKMessageInputConfig

总览：RCKMessageInputConfig（输入区域整体配置）​

  • inputFieldConfig（RCKInputFieldConfig）：输入框外观与行为。
  • leftButtonConfig（RCKInputButtonConfig）：左侧主按钮（默认语音/键盘切换）。
  • rightButtonsConfig（List<RCKInputButtonConfig>）：右侧按钮组（例如表情/更多）。
  • topButtonsConfig、bottomButtonsConfig（List<RCKInputButtonConfig>）：顶部/底部按钮组（可选）。
  • emojiConfig（RCKEmojiConfig）：表情面板。
  • voiceRecordConfig（RCKVoiceRecordConfig）：语音录制相关样式与布局。
  • padding（EdgeInsets）：输入区域内边距。
  • spacing（double）：输入框与按钮之间的间距。
  • backgroundColor（Color?）：输入区域背景色（随主题默认）。
  • dividerColor（Color?）：顶部分割线颜色。
  • quotePreviewConfig（RCKQuotePreviewConfig）：引用消息预览区域。
  • extensionMenuConfig（RCKExtensionMenuConfig?）：扩展菜单（图片/视频/文件等入口）。

输入框配置（RCKInputFieldConfig）​

  • maxHeight（double?）：最大高度限制（默认受 kInputFieldMaxHeight 约束）。
  • fillColor（Color）：填充颜色（默认跟随主题）。
  • border、focusedBorder（InputBorder?）：边框与聚焦边框。
  • contentPadding（EdgeInsets）：内部填充（默认 8）。
  • textStyle（TextStyle?）：文本样式。
  • hintText、hintStyle（String?/TextStyle?）：提示与样式。
  • cursorColor（Color?）：光标颜色。
  • borderRadius（double）：圆角（默认 10）。
  • textInputAction（TextInputAction）：键盘动作（默认发送）。

示例：

Dart
inputFieldConfig: RCKInputFieldConfig(
  hintText: '说点什么…',
  textInputAction: TextInputAction.send,
)

按钮配置（RCKInputButtonConfig）​

  • icon、activeIcon（Widget?）：普通/激活态图标。
  • size（double）：尺寸（默认 kInputFieldIconSize）。
  • spacing（double）：与相邻按钮间距（默认 kInputFieldButtonSpace）。
  • color、activeColor（Color?）：普通/激活态颜色。
  • visible（bool）：是否可见。

示例：

Dart
leftButtonConfig: const RCKInputButtonConfig(visible: true)
rightButtonsConfig: const [RCKInputButtonConfig(), RCKInputButtonConfig()]

表情面板配置（RCKEmojiConfig 及子项）​

  • backgroundColor（Color?）：背景色。
  • height（double）：面板高度（默认 kInputExtentionHeight）。
  • rowCount、columnCount（int）：行/列数（默认 3×8）。
  • emojiSize（double）：表情尺寸（默认 24）。
  • rowSpacing、columnSpacing（double）：行/列间距。
  • padding（EdgeInsets）：内边距（默认 15）。
  • pageIndicatorConfig（RCKEmojiPageIndicatorConfig）：页指示器颜色、大小、间距、底部边距。
  • deleteIcon（Widget）：删除按钮图标。
  • sendButtonConfig（RCKEmojiSendButtonConfig）：文案、尺寸、背景色、圆角、位置、边距、文本样式。
  • customEmojis（List<String>?）：自定义表情资源列表。

RCKEmojiPageIndicatorConfig 字段：activeColor、inactiveColor、size、spacing、bottomPadding。

RCKEmojiSendButtonConfig 字段：text、width、height、backgroundColor、textStyle、borderRadius、position（EmojiSendButtonPosition：bottomRight/bottomLeft/topRight/topLeft）、margin。

示例：

Dart
emojiConfig: const RCKEmojiConfig(
  height: 240,
  pageIndicatorConfig: RCKEmojiPageIndicatorConfig(size: 6),
)

引用预览配置（RCKQuotePreviewConfig）​

  • backgroundColor（Color?）：背景色。
  • padding（EdgeInsets?）：内边距。
  • textStyle（TextStyle?）：文本样式。
  • closeIcon（Icon?）：关闭按钮图标。

示例：

Dart
quotePreviewConfig: const RCKQuotePreviewConfig(
  backgroundColor: Color(0xFFF7F7F7),
)

扩展菜单配置（RCKExtensionMenuConfig 与 RCKExtensionMenuItemConfig）​

  • items（List<RCKExtensionMenuItemConfig>）：菜单项列表。
  • itemsPerPage（int）：每页数量（默认 8）。
  • crossAxisCount（int）：每行项目数（默认 4）。
  • backgroundColor（Color?）：背景色。
  • mainAxisSpacing、crossAxisSpacing（double）：行/列间距。
  • padding（EdgeInsets）：面板内边距。
  • indicatorSelectedColor、indicatorUnselectedColor（Color）：页指示器颜色。
  • height（double）：面板高度。

RCKExtensionMenuItemConfig 字段：title（String）、icon（Widget）、onTap（VoidCallback?）、onTapWithContext（优先，包含 BuildContext）、iconSize（double）、titleStyle（TextStyle?）。

示例：

Dart
final items = getDefaultGridItems(onTapBeforePermission: (context) async {});
// 新增一个自定义菜单项（仅 UI，不涉及权限）
items.add(RCKExtensionMenuItemConfig(
  title: '自定义UI',
  icon: const Icon(Icons.add),
  onTap: () { /* 自定义处理 */ },
));

extensionMenuConfig: RCKExtensionMenuConfig(
  items: items,
)

使用默认项并增删改（基于源码 getDefaultGridItems）​

默认项来自 getDefaultGridItems({ onTapBeforePermission })，内部已封装权限申请与业务触发：

  • 照片：相册权限 → 选择多图 → 发送图片/GIF
  • 视频：相册权限 → 选择视频 → 读取时长 → 发送小视频
  • 拍照：相机权限 → 拍照 → 发送图片
  • 拍摄：相机权限 → 录制（≤119s）→ 发送小视频
  • 位置：预留入口（无默认实现）
  • 文件：存储权限 → 选择文件 → 发送文件
  • 礼物：示例入口（空实现）

常见操作：

Dart
final items = getDefaultGridItems(onTapBeforePermission: (context) async {
  // 统一在权限弹窗弹出前干预（例如引导文案/自定义授权弹窗）
});

// 1) 删除默认“礼物”项
items.removeWhere((e) => e.title == '礼物');

// 2) 替换默认“位置”项，接入你自己的位置选择 UI
final idx = items.indexWhere((e) => e.title == '位置');
if (idx != -1) {
  items[idx] = RCKExtensionMenuItemConfig(
    title: '位置',
    icon: const Icon(Icons.location_on),
    onTapWithContext: (context) async {
      // 打开自定义位置选择器并回填经纬度
      // 完成后自行发送位置消息（根据你的业务封装）
    },
  );
}

// 3) 在末尾新增你的业务入口
items.add(RCKExtensionMenuItemConfig(
  title: '名片',
  icon: const Icon(Icons.perm_identity),
  onTapWithContext: (context) async {
    // 拉起名片选择并发送
  },
));

// 交给 RCKExtensionMenuConfig 渲染
extensionMenuConfig: RCKExtensionMenuConfig(items: items)

注意：

  • 如果处理需要 BuildContext（例如权限、Navigator、Provider 等），使用 onTapWithContext；仅本地轻量处理可用 onTap。
  • 如果需要在权限弹窗展示前做统一提示、引导或自定义弹窗，在 getDefaultGridItems 的 onTapBeforePermission 中处理即可。

语音录制配置（RCKVoiceRecordConfig）​

用于控制语音录制面板的尺寸、图标与提示文案等（详见类定义）。

示例：

Dart
voiceRecordConfig: const RCKVoiceRecordConfig(/* 可按需覆盖属性 */)

区域内边距与分割线​

  • padding（EdgeInsets）：输入区域上下内边距（默认 6）。
  • spacing（double）：输入框与按钮水平间距（默认 10）。
  • backgroundColor（Color?）：背景色（随主题）。
  • dividerColor（Color?）：顶部分割线颜色。

示例：

Dart
padding: const EdgeInsets.symmetric(vertical: 8),
dividerColor: const Color(0xFFEFEFEF),

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

Dart
RCKMessageInput(
  config: RCKMessageInputConfig(
    inputFieldConfig: RCKInputFieldConfig(hintText: '说点什么…'),
    leftButtonConfig: const RCKInputButtonConfig(visible: true),
    rightButtonsConfig: const [RCKInputButtonConfig(), RCKInputButtonConfig()],
    emojiConfig: const RCKEmojiConfig(height: 240),
    quotePreviewConfig: const RCKQuotePreviewConfig(),
    extensionMenuConfig: const RCKExtensionMenuConfig(),
  ),
)

需要完全自定义 UI 输入区结构与行为时，请参考：聊天页面 Builders

最后于 更新