界面跳转
更新时间: 2024/03/15 18:25:48
IM UIKit 提供统一路由IMKitRouter
,实现界面的跳转和模块之间的解耦。
IM UIKit 内置界面跳转
IM UIKit 内置的任意界面都可以通过路由地址跳转到其他指定界面。
如何使用路由进行跳转
调用 Navigator
方法进行界面跳转。
方法原型如下:
dart //带参数的界面跳转
Navigator.pushNamed(context, path, arguments: {'paramKey': param});
//不带参数的界面跳转
Navigator.pushNamed(context, path);
参数 | 类型 | 说明 |
---|---|---|
path |
String | 目标界面对应的跳转地址 |
paramKey |
String | 传递到目标界面的参数 KEY |
param |
Object | 传递到目标界面的参数值 |
context |
BuildContext | 组件上下文 |
内部路由地址概览
路由地址 |
UIKit 定义 |
Page |
对应界面 |
跳转需传入参数 |
---|---|---|---|---|
imkit://contact/contactList.page | RouterConstants.PATH_CONTACT_PAGE |
ContactPage |
通讯录界面 | 无 |
imkit://contact/selector.page | RouterConstants.PATH_CONTACT_SELECTOR_PAGE |
ContactKitSelectorPage |
通讯录人员选择器 | 无 |
imkit://contact/addFriend.page | RouterConstants.PATH_ADD_FRIEND_PAGE |
AddFriendPage |
添加好友界面 | 无 |
imkit://contact/userInfo.page | RouterConstants.PATH_USER_INFO_PAGE |
ContactKitDetailPage |
用户信息界面 | 参见跳转至用户信息界面 |
imkit://contact/blackList.page | RouterConstants.PATH_MY_BLACK_PAGE |
ContactKitBlackListPage |
黑名单界面 | 无 |
imkit://contact/teamList.page | RouterConstants.PATH_MY_TEAM_PAGE |
ContactKitTeamListPage |
我的群组界面 | 无 |
imkit://contact/verifyList.page | RouterConstants.PATH_MY_NOTIFICATION_PAGE |
ContactKitSystemNotifyMessagePage |
系统通知界面 | 无 |
imkit://chat/chat.page | RouterConstants.PATH_CHAT_PAGE |
ChatPage |
聊天界面(包括单聊和群聊) | 参见跳转至聊天界面 |
imkit://chat/searchMessage.page | RouterConstants.PATH_CHAT_SEARCH_PAGE |
ChatSearchPage |
聊天内容搜索界面 | 参见跳转至群聊搜索界面 |
imkit://team/teamSetting.page | RouterConstants.PATH_TEAM_SETTING_PAGE |
TeamSettingPage |
群设置界面 | 参见跳转至群聊设置界面 |
imkit://search/search.page | RouterConstants.PATH_GLOBAL_SEARCH_PAGE |
SearchKitGlobalSearchPage |
好友搜索界面 | 无 |
imkit://mine/userInfo.page | RouterConstants.PATH_MINE_INFO_PAGE |
UserInfoPage |
我的个人信息界面 | 无 |
imkit://conversation/conversation.page | RouterConstants.PATH_CONVERSATION_PAGE |
ConversationPage |
会话列表页 | 无 |
如果需要使用网易云信在 imkit_router_factory
中封装好的接口进行跳转,需要先导入以下组件:
dartimport 'package:common_ui/router/imkit_router_factory.dart';
跳转至用户信息界面
- 示例代码
dart// 封装好的接口
goToContactDetail(context, accId);
// 使用路由跳转
Navigator.pushNamed(context, RouterConstants.PATH_USER_INFO_PAGE, arguments: {'accId': accId});
-
参数说明
参数 类型 说明 RouterConstants.PATH_USER_INFO_PAGE
String 用户信息界面的跳转地址 accId
String 查看用户资料的用户ID context
BuildContext 组件上下文
跳转至聊天界面
- 示例代码
dart// 封装好的接口,跳转单聊
goToP2pChat(context, userId);
// 封装好的接口,跳转群聊
goToTeamChat(context, teamId);
// 使用路由跳转
Navigator.pushNamed(context, RouterConstants.PATH_CHAT_PAGE, arguments: {'sessionId': sessionId, 'sessionType': sessionType});
-
参数说明
参数 类型 说明 RouterConstants.PATH_CHAT_PAGE
String 聊天界面的跳转地址 sessionId
String 用户的 ID/群组的 ID,必传 sessionType
String 会话类型,必传: NIMSessionType.p2p
:单聊会话NIMSessionType.team
:群聊会话
context
BuildContext 组件上下文 customPopActions
PopMenuAction? 自定义消息弹框事件,非必传 onTapAvatar
Function(String? userID, {bool isSelf})? 头像点击事件,非必传 chatUIConfig
ChatUIConfig? 聊天页面定制化配置,非必传 messageBuilder
ChatKitMessageBuilder? 聊天自定义消息构建,非必传
跳转至群聊搜索界面
- 示例代码
dartNavigator.pushNamed(context, RouterConstants.PATH_CHAT_SEARCH_PAGE, arguments: {'teamId': teamId});
-
参数说明
参数 类型 说明 RouterConstants.PATH_CHAT_SEARCH_PAGE
String 群聊搜索界面的跳转地址 teamId
String 群组的 ID context
BuildContext 组件上下文
跳转至群聊设置界面
- 示例代码
dartNavigator.pushNamed(context, RouterConstants.PATH_TEAM_SETTING_PAGE, arguments: {'teamId': teamId});
-
参数说明
参数 类型 说明 RouterConstants.PATH_TEAM_SETTING_PAGE
String 群聊搜索界面的跳转地址 teamId
String 群组的 ID context
BuildContext 组件上下文
跳转至新增界面
IM UIKit 提供的路由能力,支持根据您的业务需求新增界面,并支持从其他界面跳转至新增界面。在通过路由实现跳转前,需调用registerRouter
方法注册该新增界面的路由地址。
如果需要传递参数,需要使用getArgumentFormMap
方法获取对应类型的参数。
方法原型如下:
dartIMKitRouter.instance.registerRouter(String name, WidgetBuilder builder, {Map<String, Object>? arguments})
参数 | 类型 | 说明 |
---|---|---|
name |
String | 注册界面对应的跳转地址 |
builder |
WidgetBuilder | 目标组件Builder方法 |
arguments |
Map<String, Object>? | 跳转需要携带的参数 |
- 示例代码
dart// 注册群聊设置页面路由
IMKitRouter.instance.registerRouter(
RouterConstants.PATH_TEAM_SETTING_PAGE,
(context) => TeamSettingPage(
UIKitRouter.getArgumentFormMap<String>(context, 'teamId')!));
路由的界面注册机制采用覆盖模式,即相同的 name
,后注册的界面会覆盖之前注册的界面。
此文档是否对你有帮助?