界面跳转

更新时间: 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,后注册的界面会覆盖之前注册的界面。

此文档是否对你有帮助?
有帮助
去反馈
  • IM UIKit 内置界面跳转
  • 如何使用路由进行跳转
  • 内部路由地址概览
  • 跳转至用户信息界面
  • 跳转至聊天界面
  • 跳转至群聊搜索界面
  • 跳转至群聊设置界面
  • 跳转至新增界面