跳到主要内容

聊天页面

聊天页面是 IMKit 中最核心的界面之一，它展示了与特定用户或群组的消息历史记录，并提供了消息输入区域用于发送各种类型的消息。本文档将介绍如何在 Flutter 应用中使用 IMKit 的聊天页面。

页面效果​

聊天页面通常包含以下元素：

  • 消息列表区域，展示历史消息
  • 输入区域，包含文本输入框和功能按钮
  • 表情面板
  • 更多功能面板（发送图片、文件等）

基本用法​

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

class ChatScreen extends StatelessWidget {
  // 可以传入完整的会话对象
  final RCIMIWConversation conversation;
  
  ChatScreen({required this.conversation});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RCKChatPage(
        conversation: conversation,
      ),
    );
  }
}

收到消息后执行自定义逻辑（接入 EngineProvider 通知）​

聊天页面内置通过 RCKChatProvider 同步消息列表。若您还需要在"收到消息"时执行额外操作（如埋点、提示音或业务流程），可订阅 RCKEngineProvider.receiveMessageNotifier：

Dart
class ChatScreen extends StatefulWidget {
  final RCIMIWConversation conversation;
  const ChatScreen({super.key, required this.conversation});
  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  late RCKEngineProvider _engineProvider;
  late VoidCallback _onReceiveMessage;

  @override
  void initState() {
    super.initState();
    // 延后到首帧后再读取 context
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _engineProvider = context.read<RCKEngineProvider>();
      _onReceiveMessage = () {
        final msg = _engineProvider.receiveMessageNotifier.value;
        if (msg == null) return;
        // 在此处编写自定义逻辑（示例）
        // playSound();  sendLocalAnalytics(msg);  showInAppBanner(msg);
      };
      _engineProvider.receiveMessageNotifier.addListener(_onReceiveMessage);
    });
  }

  @override
  void dispose() {
    // 移除监听，避免内存泄漏
    try {
      _engineProvider.receiveMessageNotifier.removeListener(_onReceiveMessage);
    } catch (_) {}
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RCKChatPage(conversation: widget.conversation);
  }
}

说明：

  • UI 列表更新由 RCKChatProvider 自动完成；上述监听仅用于额外业务逻辑，避免重复插入消息。
  • 其他可用通知：networkChangeNotifier（网络变更）、recallMessageNotifier（消息被撤回）、failedMessageSentNotifier（失败消息重发成功）、speechToTextMessageNotifier（语音转文字完成）等，使用方式相同。
  1. 跳转到聊天页面：
Dart
// 从会话列表跳转到聊天页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => RCKChatPage(
      conversation: conversation,
    ),
  ),
);

自定义 UI​

请参见自定义文档入口：

大部分 Config 提供了 copyWith 方法，您可以使用它复制已有 Config，方便使用。

消息类型与气泡​

创建消息需要使用 rongcloud_im_wrapper_plugin 库中的 engine 来实现。

IMKit 支持多种消息类型，并为每种类型提供了默认的气泡样式：

文本消息​

Dart
import 'package:provider/provider.dart';

// 发送文本消息
final chatProvider = context.read<RCKChatProvider>();

// 通过 ChatProvider 发送文本消息
await chatProvider.sendTextMessage("这是一条文本消息");

// 如需更多控制，可通过以下方式创建并发送消息
final engineProvider = context.read<RCKEngineProvider>();
final engine = engineProvider.engine;

// 创建文本消息
RCIMIWTextMessage? textMessage = await engine?.createTextMessage(
  RCIMIWConversationType.private,
  'user123',
  null, // channelId，普通会话为 null
  '这是一条文本消息'
);

if (textMessage != null) {
  // 发送消息
  chatProvider.sendMessage(textMessage);
}

图片消息​

Dart
// 发送图片消息
final chatProvider = context.read<RCKChatProvider>();

// 通过 ChatProvider 发送图片消息
await chatProvider.addImageMessage(imagePath); // imagePath 是图片的本地路径

// 如需更多控制，可使用底层接口
final engineProvider = context.read<RCKEngineProvider>();
final engine = engineProvider.engine;

// 创建图片消息
RCIMIWImageMessage? imageMessage = await engine?.createImageMessage(
  RCIMIWConversationType.private,
  'user123',
  null,
  imagePath // 图片路径
);

if (imageMessage != null) {
  // 发送消息
  chatProvider.sendMessage(imageMessage);
}

语音消息​

Dart
// 发送语音消息
final chatProvider = context.read<RCKChatProvider>();

// 通过 ChatProvider 发送语音消息
await chatProvider.addVoiceMessage(
  voicePath, // 语音文件路径
  duration   // 语音时长（秒）
);

// 如需更多控制，可使用底层接口
final engineProvider = context.read<RCKEngineProvider>();
final engine = engineProvider.engine;

// 创建语音消息
RCIMIWVoiceMessage? voiceMessage = await engine?.createVoiceMessage(
  RCIMIWConversationType.private,
  'user123',
  null,
  voicePath, // 语音文件路径
  duration   // 语音时长（秒）
);

if (voiceMessage != null) {
  // 发送消息
  chatProvider.sendMessage(voiceMessage);
}

// 播放语音消息
chatProvider.playVoiceMessage(voiceMessage);

// 停止播放语音
chatProvider.stopVoiceMessage();

视频消息​

Dart
// 发送视频消息
final chatProvider = context.read<RCKChatProvider>();

// 通过 ChatProvider 发送视频消息
await chatProvider.addSightMessage(
  videoPath,  // 视频文件路径
  duration    // 视频时长（秒）
);

// 如需更多控制，可使用底层接口
final engineProvider = context.read<RCKEngineProvider>();
final engine = engineProvider.engine;

// 创建视频消息
RCIMIWSightMessage? sightMessage = await engine?.createSightMessage(
  RCIMIWConversationType.private,
  'user123',
  null,
  videoPath,    // 视频文件路径
  duration      // 视频时长（秒）
);

if (sightMessage != null) {
  // 发送消息
  chatProvider.sendMessage(sightMessage);
}

文件消息​

Dart
// 发送文件消息
final chatProvider = context.read<RCKChatProvider>();

// 通过 ChatProvider 发送文件消息
await chatProvider.addFileMessage(filePath); // filePath 是文件的本地路径

// 如需更多控制，可使用底层接口
final engineProvider = context.read<RCKEngineProvider>();
final engine = engineProvider.engine;

// 创建文件消息
RCIMIWFileMessage? fileMessage = await engine?.createFileMessage(
  RCIMIWConversationType.private,
  'user123',
  null,
  filePath // 文件路径
);

if (fileMessage != null) {
  // 发送消息
  chatProvider.sendMessage(fileMessage);
}

自定义消息气泡​

请参见：

输入区域扩展​

请参见：

自定义消息​

请参见：

最后于 更新