集成会话消息界面
更新时间: 2024/09/27 10:50:00
本文介绍如何集成会话界面。
会话界面 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 (必填) |
创建自己的ChatPage
您也可通过如下两个步骤创建自己的ChatPage
。
-
创建自己的
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, ) ], ), ], ));
-
-
将自己实现的
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'), ));
此文档是否对你有帮助?