跳到主要内容

会话列表页面

会话列表页面展示了用户的所有会话，包括单聊、群聊和系统会话等。本文档将介绍如何在 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,
              ),
            ),
          );
        },
      ),
    );
  }
}

自定义 UI​

请参见自定义文档入口：

常见操作​

长按菜单​

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

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);
              },
            ),
          ],
        );
      },
    );
  },
);