界面跳转

更新时间: 2025/04/02 17:14:13

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: {'conversationId': conversationId,
            'conversationType': conversationType});
    
  • 参数说明

    参数 类型 说明
    RouterConstants.PATH_CHAT_PAGE String 聊天界面的跳转地址。
    conversationId String 用户的 ID/群组的 ID,必传。
    conversationType NIMConversationType 会话类型,必传。
  • NIMConversationType.p2p:单聊会话
  • NIMConversationType.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,bool cover = false})
参数 类型 说明
name String 注册界面对应的跳转地址。
builder WidgetBuilder 目标组件 Builder 方法。
arguments Map<String, Object>? 跳转需要携带的参数。
cover bool 是否覆盖之前注册的路由。

示例代码

dart// 注册群聊设置页面路由
IMKitRouter.instance.registerRouter(
        RouterConstants.PATH_TEAM_SETTING_PAGE,
        (context) => TeamSettingPage(
            UIKitRouter.getArgumentFormMap<String>(context, 'teamId')!));

路由的界面注册机制采用覆盖模式,即相同的 name,后注册的界面会覆盖之前注册的界面。

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