集成会话消息界面

更新时间: 2024/09/27 10:50:00

本文介绍如何集成会话界面。

会话界面 UI 个性化定制相关说明,请参见自定义会话消息 UI

集成效果

会话消息界面效果.png

初始化 nim_chatkit_ui

使用nim_chatkit_ui之前,需调用ChatKitClient.init方法对该模块进行初始化,以保证该模块功能的正常使用。初始化方法全局只需要调用一次,建议您在main.dart 文件中调用。

初始化需要在 IM UIKit 界面加载之前进行。

示例代码如下:

dartvoid main() {

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    ChatKitClient.init();
    // ...
  }
}

集成会话界面

会话页面在ChatPage类中实现,接入之前请确保已经引入nim_chatkit_ui依赖。

dependencies:
  nim_chatkit_ui: ^1.0.0-rc.0

命名路由直接跳转

您可以使用命名路由直接跳转到ChatPage,示例代码如下:

///单聊
 Navigator.pushNamed(context, RouterConstants.PATH_CHAT_PAGE,
     arguments: {'sessionId': userId, 'sessionType': NIMSessionType.p2p});
///群聊
Navigator.pushNamed(context, RouterConstants.PATH_CHAT_PAGE,
     arguments: {'sessionId': teamId, 'sessionType': NIMSessionType.team});

参数说明:

参数
类型
说明
context BuildContext 上下文
sessionId String 会话ID,单聊传对方UserId,群聊填teamId (必填)
sessionType NIMSessionType 会话类型 (必填)
anchor NIMMessage 定位消息(可选)

也可使用云信已封装的路由方法跳转,示例代码如下:

dartimport 'package:im_common_ui/router/imkit_router_factory.dart';
///单聊
goToP2pChat(context, userId);
///群聊
goToTeamChat(context, teamId);

实例化ChatPage跳转

dart//跳转到单聊界面
Navigator.push(context, MaterialPageRoute(builder: (context){
      return ChatPage(sessionId: sessionId, sessionType: sessionType)
    }));
  • ChatPage实例化参数
dartChatPage(
      {Key? key,
      required this.sessionId,
      required this.sessionType,
      this.anchor,
      this.customPopActions,
      this.onTapAvatar,
      this.chatUIConfig,
      this.messageBuilder})
  • ChatPage参数说明
参数
类型
说明
sessionId String 会话ID,单聊传对方UserId,群聊填teamId (必填)

创建自己的ChatPage

您也可通过如下两个步骤创建自己的ChatPage

  1. 创建自己的ChatPage,并集成我们提供的消息列表(ChatKitMessageList)和输入模块(BottomInputField)。

    • ChatKitMessageList 参数

      参数
      类型
      说明
      scrollController AutoScrollController 滑动控制器(必填)
      anchor NIMMessage 定位消息 (可选)
      customPopActions PopMenuAction 长按弹框操作函数 (可选)
      onTapAvatar Function(String? userID, {bool isSelf}) 头像点击方法 (可选)
      chatUIConfig ChatUIConfig 页面配置 (可选)
      messageBuilder ChatKitMessageBuilder) 自定义消息builder方法 (可选)
      teamInfo NIMTeam) 群组信息 (群聊必填)
    • BottomInputField 参数

      参数
      类型
      说明
      scrollController AutoScrollController 滑动控制器(必填)
      sessionType NIMSessionType 会话类型 (必填)
      hint String 默认提示 (可选)
      chatUIConfig ChatUIConfig 页面配置 (可选)
    • 示例代码

      dart  Scaffold(
                    backgroundColor: Colors.white,
                    //your appbar
                    appBar: AppBar(),
                    body: Stack(
                      alignment: Alignment.topCenter,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                              ///消息列表
                            Expanded(
                              child: Listener(
                                onPointerMove: (event) {
                                  _inputField.currentState.hideAllPanel();
                                },
                                child: ChatKitMessageList(
                                  scrollController: autoController,
                                  popMenuAction: widget.customPopActions,
                                  anchor: widget.anchor,
                                  messageBuilder: widget.messageBuilder ??
                                      widget.chatUIConfig?.messageBuilder ??
                                      ChatKitClient
                                          .instance.chatUIConfig.messageBuilder,
                                  onTapAvatar: widget.onTapAvatar ?? defaultAvatarTap,
                                  chatUIConfig: widget.chatUIConfig ??
                                      ChatKitClient.instance.chatUIConfig,
                                  teamInfo: context.watch<ChatViewModel>().teamInfo,
                                ),
                              ),
                            ),
                            ///输入模块
                            BottomInputField(
                              scrollController: autoController,
                              sessionType: widget.sessionType,
                              hint: S.of(context).chat_message_send_hint(title),
                              chatUIConfig: widget.chatUIConfig ??
                                  ChatKitClient.instance.chatUIConfig,
                              key: _inputField,
                            )
                          ],
                        ),
                      ],
                    ));
      
  2. 将自己实现的ChatPage注册到路由管理器,方便其他模块跳转。

    示例代码如下:

    dart  IMKitRouter.instance.registerRouter(
          RouterConstants.PATH_CHAT_PAGE,
          (context) => ChatPage(
                sessionId:
                    IMKitRouter.getArgumentFormMap<String>(context, 'sessionId')!,
                sessionType: IMKitRouter.getArgumentFormMap<NIMSessionType>(
                    context, 'sessionType')!,
                anchor:
                    IMKitRouter.getArgumentFormMap<NIMMessage>(context, 'anchor'),
              ));
    
此文档是否对你有帮助?
有帮助
去反馈
  • 集成效果
  • 初始化 nim_chatkit_ui
  • 集成会话界面
  • 命名路由直接跳转
  • 实例化ChatPage跳转
  • 创建自己的ChatPage