跳到主要内容

会话列表页面

会话列表页面展示了用户的所有会话，包括单聊、群聊和系统会话等。本文档将介绍如何在Flutter应用中使用IMKit的会话列表页面。

页面效果​

会话列表页面展示了当前用户所有的会话，每个会话项包含以下信息：

  • 会话头像
  • 会话标题（对方用户名或群组名）
  • 最后一条消息内容预览
  • 最后一条消息时间
  • 未读消息数量
  • 免打扰状态
  • 置顶状态

基本用法​

  1. 在Flutter页面中使用RCKConvoPage组件：
Dart
import 'package:flutter/material.dart';
import 'package:rongcloud_im_kit/rongcloud_im_kit.dart';

class ConversationListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('会话列表'),
      ),
      body: RCKConvoPage(
        onItemTap: (context, conversation, index) {
          // 跳转到聊天页面
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => RCKChatPage(
                conversation: conversation,
              ),
            ),
          );
        },
      ),
    );
  }
}

自定义配置​

IMKit提供了灵活的配置选项，可以自定义会话列表的外观和行为：

Dart
RCKConvoPage(
  // 会话列表样式配置
  config: RCKConvoConfig(
    // 会话项配置
    itemConfig: RCKItemConfig(
      // 会话项高度
      height: 80,
      // 分割线颜色
      dividerColor: Colors.grey[200],
      // 分割线高度
      dividerHeight: 0.5,
      // 分割线缩进
      dividerIndent: 64,
      dividerEndIndent: 0,
    ),
    // 会话标题配置
    titleConfig: RCKTitleConfig(
      // 标题样式
      style: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.bold,
        color: Colors.black,
      ),
    ),
    // 最后一条消息配置
    lastMessageConfig: RCKLastMessageConfig(
      // 消息内容预览样式
      style: TextStyle(
        fontSize: 14,
        color: Colors.grey,
      ),
    ),
    // 时间配置
    timeConfig: RCKTimeConfig(
      // 时间样式
      fontSize: 12,

      color: Colors.grey,
    ),
    // 列表配置
    listConfig: RCKListConfig(
      // 是否显示搜索条
      showSearchBar: true,
      // 背景颜色
      backgroundColor: Colors.white,
      // 空列表文本
      emptyText: '没有会话',
    ),
    // 未读消息角标配置
    unreadBadgeConfig: RCKUnreadBadgeConfig(
      // 未读消息背景颜色
      backgroundColor: Colors.red,
      // 未读消息显示位置
      position: ItemElementPosition.avatarTopRight,
    ),
    // AppBar配置
    appBarConfig: RCKConvoAppBarConfig(
      // 标题
      titleConfig: AppbarTitleConfig(),
    ),
  ),
  // 空列表构建器
  emptyBuilder: (BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ImageUtil.getImageWidget(
            RCKThemeProvider().themeIcon.noMessages ?? '',
            width: kConvoItemEmptyIconSize,
            height: kConvoItemEmptyIconSize,
            color: const Color(0xFFD7D7D7),
          ),
          const SizedBox(height: 14),
          Text(
            '暂无会话', 
            style: TextStyle(
              fontSize: convoLastFontSize,
              color: RCKThemeProvider().themeColor.textAuxiliary,
            ),
          ),
        ],
      ),
    );
  },
  // 长按事件
  onItemLongPress: (context, conversation, index) {
    // 处理长按逻辑，如弹出操作菜单
  },
);

自定义会话列表项​

IMKit允许开发者自定义会话列表项的渲染方式：

Dart
RCKConvoPage(
  // 完全自定义会话项
  itemBuilder: (context, conversation, config) {
    return ListTile(
      leading: CircleAvatar(
        radius: 25,
        backgroundImage: NetworkImage(getUserAvatar(conversation.targetId ?? '')),
      ),
      title: Text(
        getUserName(conversation.targetId ?? ''),
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      subtitle: Text(
        getLastMessageContent(conversation) ?? '',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
      trailing: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            conversation.formattedTime ?? '',
            style: TextStyle(color: Colors.grey, fontSize: 12),
          ),
          if ((conversation.unreadCount ?? 0) > 0)
            Container(
              padding: EdgeInsets.all(4),
              decoration: BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle,
              ),
              child: Text(
                '${conversation.unreadCount}',
                style: TextStyle(color: Colors.white, fontSize: 10),
              ),
            ),
        ],
      ),
      onTap: () {
        // 处理点击事件
        navigateToChatPage(context, conversation);
      },
    );
  },
  
  // 局部自定义（只自定义头像）
  avatarBuilder: (context, conversation, config) {
    return CircleAvatar(
      backgroundImage: NetworkImage(getUserAvatar(conversation.targetId ?? '')),
      radius: 25,
    );
  },
  
  // 局部自定义（只自定义标题）
  titleBuilder: (context, conversation, config) {
    return Text(
      getUserName(conversation.targetId ?? ''),
      style: TextStyle(fontWeight: FontWeight.bold),
    );
  },
  
  // 局部自定义（只自定义最后一条消息）
  lastMessageBuilder: (context, conversation, config) {
    // 获取最后一条消息的类型和内容
    final lastMessage = conversation.latestMessage;
    String contentText = '';
    
    if (lastMessage != null) {
      if (lastMessage.messageType == RCIMIWMessageType.text) {
        // 文本消息
        final textMessage = lastMessage as RCIMIWTextMessage;
        contentText = textMessage.text ?? '';
      } else if (lastMessage.messageType == RCIMIWMessageType.image) {
        // 图片消息
        contentText = '[图片]';
      } else if (lastMessage.messageType == RCIMIWMessageType.voice) {
        // 语音消息
        contentText = '[语音]';
      } else {
        // 其他类型消息
        contentText = '[未知消息类型]';
      }
    }
    
    return Text(
      contentText,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(color: Colors.grey),
    );
  },
);

常见操作​

长按菜单​

通常，长按会话项会弹出操作菜单，例如删除会话、置顶会话、设为已读等。以下是实现方式：

Dart
RCKConvoPage(
  onItemLongPress: (context, conversation, index) {
    final engineProvider = context.read<RCKEngineProvider>();
    final conversationProvider = context.read<RCKConvoProvider>();
    
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Wrap(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.delete),
              title: Text('删除会话'),
              onTap: () {
                Navigator.pop(context);
                // 删除会话
                conversationProvider.removeConversation(index);
              },
            ),
            ListTile(
              leading: Icon(conversation.top ?? false ? Icons.push_pin_outlined : Icons.push_pin),
              title: Text(conversation.top ?? false ? '取消置顶' : '置顶会话'),
              onTap: () {
                Navigator.pop(context);
                // 置顶或取消置顶
                conversationProvider.pinConversation(index);
              },
            ),
          ],
        );
      },
    );
  },
);