会话列表页面
会话列表页面展示了用户的所有会话，包括单聊、群聊和系统会话等。本文档将介绍如何在Flutter应用中使用IMKit的会话列表页面。
页面效果
会话列表页面展示了当前用户所有的会话，每个会话项包含以下信息：
- 会话头像
- 会话标题（对方用户名或群组名）
- 最后一条消息内容预览
- 最后一条消息时间
- 未读消息数量
- 免打扰状态
- 置顶状态
基本用法
- 在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,
),
),
);
},
),
);
}
}
自定义配置
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);
},
),
],
);
},
);
},
);