跳到主要内容

会话列表页面

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

页面效果

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

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

基本用法

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

class ConversationListScreen extends StatelessWidget {

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