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

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

集成效果

初始化 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 （必填）
sessionType	NIMSessionType	会话类型 （必填）
- anchor	NIMMessage	定位消息 (可选)
customPopActions	PopMenuAction	长按弹框操作函数 (可选)
onTapAvatar	Function(String? userID, {bool isSelf})	头像点击方法 (可选)
chatUIConfig	ChatUIConfig	页面配置 (可选)
messageBuilder	ChatKitMessageBuilder)	自定义消息builder方法 (可选)

创建自己的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'),
             ));