跳到主要内容

会话列表（Builder 完全自定义 UI）

当 Config 配置无法满足需求时，可使用 Builder 完全自定义会话列表界面元素，包括：AppBar、单元格、头像、标题、最后一条消息、时间显示、未读角标、空态/顶部提示等。下文列出所有可用 Builder 类型，并提供实现示例。

入口组件​

  • 组件：RCKConvoPage
  • 可用 Builder 类型：
    • ConvoAppBarBuilder（自定义顶部导航栏）
    • ItemBuilder（自定义会话单元格整体布局）
    • AvatarBuilder、TitleBuilder、LastMessageBuilder、TimeBuilder、UnreadBadgeBuilder（自定义局部元素）
    • tipBuilder（自定义顶部提示区域）、emptyBuilder（自定义空状态界面）

示例：自定义单元格点击事件并注册消息气泡 Builder​

Dart
itemOnTap(BuildContext context, RCIMIWConversation conversation, int index) {
  context.read<RCKConvoProvider>().selectConversation(conversation);
  Navigator.pushNamed(context, '/chat', arguments: {
    'conversation': conversation,
    'customChatItemBubbleBuilders': {
      RCIMIWMessageType.nativeCustom: customChatItemBubbleBuilders
    },
  }).then((value) {
    if (context.mounted) {
      context.read<RCKConvoProvider>().popConversation();
    }
  });
}

return RCKConvoPage(
  onItemTap: itemOnTap,
);

示例：自定义头像和标题渲染​

Dart
RCKConvoPage(
  avatarBuilder: (context, conversation, config) => CircleAvatar(...),
  titleBuilder: (context, conversation, config) => Text(conversation.name ?? ''),
)

提示：如果仅需调整样式参数，建议优先使用 会话列表配置（Config 部分自定义 UI） 方案实现

示例：自定义 AppBar（ConvoAppBarBuilder）​

当需要完全自定义会话列表页顶部导航栏外观与交互时，可通过 appBarBuilder 返回任意 PreferredSizeWidget（如 AppBar）。

Dart
RCKConvoPage(
  appBarBuilder: (context, config) {
    return AppBar(
      // 高度遵循配置项，亦可自定义固定高度
      toolbarHeight: config.height,
      centerTitle: true,
      elevation: 0,
      backgroundColor: Colors.white,
      // 自定义标题区域（示例：带图标的标题）
      title: Row(
        mainAxisSize: MainAxisSize.min,
        children: const [
          Icon(Icons.chat_bubble_outline, size: 18),
          SizedBox(width: 6),
          Text('会话', style: TextStyle(fontWeight: FontWeight.w600)),
        ],
      ),
      // 返回按钮（示例）
      leading: IconButton(
        icon: const Icon(Icons.arrow_back),
        onPressed: () => Navigator.maybePop(context),
      ),
      // 右侧操作（示例：创建会话入口）
      actions: [
        IconButton(
          icon: const Icon(Icons.add),
          onPressed: () => Navigator.pushNamed(context, '/create_conversation'),
        ),
      ],
      // 可选：顶部背景渐变/图片
      flexibleSpace: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFFFFFFFF), Color(0xFFF8F8F8)],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
      ),
      // 可选：底部分割线
      bottom: const PreferredSize(
        preferredSize: Size.fromHeight(1),
        child: Divider(height: 1),
      ),
    );
  },
)

示例：自定义顶部提示区域（tipBuilder）​

tipBuilder 渲染于搜索框上方，用于展示网络状态、系统公告、活动提示等。返回任意 Widget 即可；若不设置，Flutter IMKit 会在网络异常时显示内置的“网络不可用”提示。

Dart
// 示例一：固定公告栏
RCKConvoPage(
  tipBuilder: (context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      color: Colors.amber.shade50,
      child: Row(
        children: [
          const Icon(Icons.campaign, color: Color(0xFFFF9800), size: 18),
          const SizedBox(width: 6),
          const Expanded(
            child: Text(
              '企业公告：本周五 18:00-20:00 系统维护',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          TextButton(
            onPressed: () => Navigator.pushNamed(context, '/notice'),
            child: const Text('详情'),
          ),
        ],
      ),
    );
  },
)
Dart
// 示例二：根据网络状态/业务状态动态展示
// 需要依赖 provider：import 'package:provider/provider.dart';
RCKConvoPage(
  tipBuilder: (context) {
    final provider = context.watch<RCKConvoProvider>();
    final isDisconnected = provider.connectionStatus != RCIMIWConnectionStatus.connected;

    if (isDisconnected) {
      return Container(
        height: 42,
        color: const Color(0xFFFFF3F3),
        padding: const EdgeInsets.symmetric(horizontal: 12),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(Icons.wifi_off, color: Color(0xFFD32F2F), size: 18),
            SizedBox(width: 6),
            Text('当前网络不可用，请检查网络设置', style: TextStyle(color: Color(0xFF333333))),
          ],
        ),
      );
    }

    // 不需要展示提示时返回占位
    return const SizedBox.shrink();
  },
)

提示：tipBuilder 仅在会话列表非空时渲染。当列表为空时，页面改为 Column 布局：先显示内置网络状态提示（若异常），再显示空态区域（或 emptyBuilder）。

最后于 更新