首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么从ModalRoute获取参数的screen会在导航器上重新构建?

从ModalRoute获取参数的screen会在导航器上重新构建的原因是因为ModalRoute是基于路由栈的一种特殊路由类型,它通常用于显示模态对话框或弹出窗口。当我们通过ModalRoute.of(context)获取参数时,它会在导航器上重新构建,这是因为ModalRoute.of(context)方法会遍历整个路由栈,直到找到与当前上下文匹配的ModalRoute对象。

重新构建的过程是为了确保我们能够获取到正确的参数值。由于ModalRoute是基于路由栈的,当我们打开一个模态对话框或弹出窗口时,会将新的路由添加到路由栈中,而导航器会根据路由栈的变化来重新构建界面。因此,当我们从ModalRoute获取参数时,它会在导航器上重新构建,以确保我们获取到的是最新的参数值。

这种重新构建的机制可以确保我们在模态对话框或弹出窗口中使用ModalRoute.of(context)获取到的参数是准确的,而不会受到之前页面状态的影响。这在很多场景下非常有用,比如在模态对话框中显示详细信息或执行某些操作时,我们可以通过ModalRoute获取到传递过来的参数,并根据参数值来更新界面或执行相应的逻辑。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,满足各种计算需求。产品介绍链接
  • 腾讯云云数据库MySQL版(TencentDB for MySQL):提供高性能、可扩展的关系型数据库服务。产品介绍链接
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。产品介绍链接
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联网设备。产品介绍链接
  • 腾讯云移动开发(Mobile):提供移动应用开发和运营的一站式解决方案,包括移动后端云服务、推送服务等。产品介绍链接
  • 腾讯云对象存储(COS):提供安全可靠的云端存储服务,适用于各种数据存储需求。产品介绍链接
  • 腾讯云区块链(Blockchain):提供高性能、可扩展的区块链服务,支持构建和管理区块链网络。产品介绍链接

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter开发之路由与导航实现

其中,Route是页面的抽象,主要负责创建界面、接收参数以及响应导航器Navigator打开与关闭。...要想跳转到其他子路由管理页面,就需要在根导航器中进行注册,也就是MaterialApp内部航器。 路由传参 在移动应用开发中,页面参数传递也是一个比较常见需求。...为了满足不同场景下页面跳转过程中参数传递需求,Flutter提供了路由参数机制,可以在打开路由时传递参数,然后在目标页面通过RouteSettings来获取页面传递参数,如下所示。...具体来说,就是在使用push()方法打开目标页面时,可以设置目标页面关闭时监听函数来获取返回参数,当目标页面关闭路由时使用pop()方法回传参数即可。...MaterialPageRoute 是Material组件库提供组件,它可以针对不同平台,实现与平台页面切换动画风格一致路由切换动画:当打开页面时,新页面会屏幕右侧边缘一致滑动到屏幕左边,直到新页面全部显示到屏幕

3.2K10

Flutter 路由参数传递及接收

Navigator push 和 pop方法 Navigator 导航器 push 和 pop 方法可以携带参数在页面间传递,其他变形方法也一样。...代码实现 我们使用一个列表跳转到详情页来演示路由参数获取(列表构建文章请看Flutter 入门与实战(五):来一个图文并茂列表)。点击列表行时携带列表数据项 id 跳转到详情页。...详情页返回时再把该 id 回传。列表项 Widget 新增了一个 id属性,由构建列表时初始化得到。...在详情页中,Flutter 提供了一个ModalRoute当前上下文获取路由配置参数,代码如下所示: class DynamicDetail extends StatelessWidget {...ModalRoute.of(context).settings就是我们一篇路由拦截中onGenerateRoute settings 参数,因此假设我们需要增加额外路由参数(例如全局参数),则可以在

1.2K00
  • 深入探究Flutter中页面导航器:Navigator详解

    这个方法接受一个BuildContext对象作为参数,用于将当前页面对应路由对象栈中弹出,返回到上一个页面。...在目标页面中,我们可以通过ModalRoute.of(context).settings.arguments来获取传递过来参数。...'}, ); // 在目标页面中获取传递过来参数 Map args = ModalRoute.of(context)!....路由保持状态概念: 路由保持状态是指在页面切换时,保持页面的状态不变,避免页面重新构建和初始化。这种技术可以提升用户体验,减少页面重建开销,特别是对于包含大量数据或复杂交互页面而言。 2....在多个导航器之间进行导航: 要在多个导航器之间进行导航,我们可以通过GlobalKey来获取对应NavigatorState,并调用其push和pop等方法来进行页面跳转和返回。

    1K10

    React Native 导航:示例教程

    React Navigation 是用 JavaScript 编写,并不直接使用 iOS 和 Android 原生导航 API。相反,它重新创建了这些 API 某些子集。...React Native 堆栈导航器 React Navigation 使用 JavaScript 构建,让我们创建组件和导航模式在外观和感觉都与真正原生模式无异。...则利用了原生 API;iOS UINavigationController 和 Android Fragment,这样导航行为就会与原生构建应用程序一样。...这就是为什么我们可以在 HomeScreen.js 一个按钮使用它,当按下时,会导致页面跳转到 AboutScreen,如下所示: <Button title="Go to About" onPress...要了解更多信息,请查看 React Navigation 文档,并随时 GitHub 仓库中获取最终代码。

    33210

    『React Navigation 3x系列教程』之React Navigation 3x开发指南

    在开始学习7种导航器之前,我们需要先了解两个和导航关于概念: Screen navigation prop(屏幕导航属性):通过navigation可以完成屏幕之间调度操作,例如打开另一个屏幕; Screen...向路由发送一个action; addListener:订阅导航生命周期更新; isFocused:true 标识屏幕获取了焦点; getParam:获取具有回退特定参数; dangerouslyGetParent...并且关闭当前screen.backaction creator接受一个可选参数: 方法原型:back(key) key:String 可选,这个可以和上文中讲到goBackkey是一个概念;...与navigate区别在于,如果有已经加载页面,navigate方法将跳转到已经加载页面,而不会重新创建一个新页面。...,就是要想法获取navigation; 那么,如何才能在非导航器中所定义屏幕中获取到这个navigation呢?

    4.3K30

    navigator到react-navigation进阶教程

    在开始学习三种导航器之前,我们需要先了解两个和导航关于概念: Screen navigation prop(屏幕导航属性):通过navigation可以完成屏幕之间调度操作,例如打开另一个屏幕; Screen...react-navigation精讲 使用stateparams 可以通过this.props.state.params来获取通过setParams(),或navigation.navigate()传递参数...react-navigation精讲 Back 返回到前一个screen并且关闭当前screen.backaction creator接受一个可选参数: key:这个可以和上文中讲到goBackkey...,就是要想法获取navigation; 那么,如何才能在非导航器中所定义屏幕中获取到这个navigation呢?...ref属性获取到navigation,当上述代码AppNavigator节点被渲染时,ref会被回调这是就可以获取到navigation了,需要提醒大家是,这种用法对除StackNavigator之外其他两种类型航器也是实用

    3.9K30

    『React Navigation 3x系列教程』createDrawerNavigator开发指南

    createDrawerNavigator API可以看出createDrawerNavigator支持通过RouteConfigs和 DrawerNavigatorConfig两个参数来创建createDrawerNavigator...RouteConfigs RouteConfigs支持三个参数screen、path以及navigationOptions; screen(必选):指定一个 React 组件作为屏幕主要显示内容,当这个组件被...path(可选):用来设置支持schema跳转时使用,具体使用会在下文有关Schema章节中讲到; navigationOptions(可选):用以配置全局屏幕导航选项如:title、headerRight...这也可以通过在顶级路由器使用screenProps.drawerLockMode 动态更新。...可以props中获取; 打开侧边栏:navigation.openDrawer();; 关闭侧边栏:navigation.closeDrawer();; 切换侧边栏:navigation.toggleDrawer

    7.1K10

    flutter系列之:Navigator高级用法

    named routes 虽然在flutter中navigator将routers以stack形式进行存储,能做也只是push和pop操作,但是事实Router是可以有名字。...定义可以看到arguments类型是Object对象,也就是说任何对象都可以作为named route参数。...在flutter中有两种传递参数方式,你可以使用ModalRoute.of(),也可以使用onGenerateRoute()。...返回值 有时候我们需要从一个Screen返回到之前Screen,并且不是简单返回,我们还希望知道前一个screen返回了什么结果,然后可以根据前一个screen返回不同结果来进行不同处理。...向Screen传值 有时候我们需要在页面跳转过程中传递一些参数,那么怎么才能实现Screen之间参数传递呢?

    88020

    flutter路由

    ; Navigator 方法 作用 pushNamed 按路由名字路由入栈 pushReplacementNamed 按路由名字替换当前路由栈 popAndPushNamed 将当前路线航器中弹出,...pushAndRemoveUntil 将具有给定名称路由推入导航器,然后删除所有 replace 用新路由替换导航器路由 replaceRouteBelow 用新路由替换导航器路由。...MaterialApp,这个上下文不包含Navigator导航器操作, 所以我们应该把home那部分抽出来放另一个类; 路由传值并返回值 路由传参在上面那个例子已经有了,num就是我们参数,然后显示在标题上就是使用了...= null) print('接收到参数:$value'); }); } 这样我们就能push到新页面然后点击返回按钮就能把参数返回到push到它那个方法,然后在then打印出来了: I/flutter...(21935): 接收到参数:我是返回值 直接点击左上角那个返回值会为空,这样打印出来就是: I/flutter (21935): 接收到参数:null 所以我们做了一个判断,不为空才执行打印

    1.7K20

    react-navigation导航器

    Screen navigationOptions(屏幕导航选项):通过navigationOptions可以定制导航器显示屏幕方式(例如:头部标题,选项卡标签等) 导航器类型 在react-navigation...中有以下类型航器: createStackNavigator:类似普通Navigator,导航⽅导航栏 createTabNavigator:已弃用,使⽤createBottomTabNavigator...:订阅导航生命周期更新 isFocused:true标识屏幕获取了焦点 getParam:获取具有回退特定参数 dangerouslyGetParent:返回父导航器 注意:一个navigation...跳转 接收两个参数,第一个是定义好路由名,第二个是页面参数。...可以通过指定⻚面的navigation.state.key来获取⻚页⾯面的标识 key必传,不传默认返回一页 传参 现在我想定义一个参数给下一个也页面,可以这么做: <Button title

    6.3K20

    Flutter开发(15)- 路由导航

    我们通常会用屏(Screen)来称呼一个页面(Page),一个完整App应该是有多个Page组成。...replaces the /// entire screen with a platform-adaptive transition. abstractclass Route { } 事实MaterialPageRoute...并不是Route直接子类: MaterialPageRoute在不同平台有不同表现 对Android平台,打开一个页面会屏幕底部滑动到屏幕顶部,关闭页面时顶部滑动到底部消失 对iOS平台,打开一个页面会屏幕右侧滑动到屏幕左侧...参数传递 因为通常命名路由,我们会在定义路由时,直接创建好对象,比如HYDetailPage() 那么,命名路由如果有参数需要传递呢?...在build方法中ModalRoute.of(context)可以获取到传递参数 Widget build(BuildContext context) { // 1.获取数据 final message

    97920

    『React Navigation 3x系列教程』之createStackNavigator开发指南

    屏幕转场风格 默认情况下,createStackNavigator提供了转场过渡效果,在Android和iOS上过渡效果是不同,这也是React Native重平台性一个体现,在Android屏幕底部淡入...,在iOS屏幕右侧划入,当然你也可以通过配置让StackNavigator支持屏幕底部滑入效果。...createStackNavigator API可以看出createStackNavigator 支持通过RouteConfigs和 StackNavigatorConfig两个参数来创建createStackNavigator...RouteConfigs RouteConfigs支持三个参数screen、path以及navigationOptions; screen(必选):指定一个 React 组件作为屏幕主要显示内容,当这个组件被...、headerLeft等; StackNavigatorConfig react-navigation源码中可以看出StackNavigatorConfig支持配置参数有10个。

    5K10

    大前端开发中路由管理之五:Flutter篇

    ModalRoute:阻止与下层路由交互路由。它覆盖整个导航器。但它们不一定是不透明。例如一个对话框。主要处理事件拦截。 PageRoute:替换整个屏幕模态路由。...由它派生出了我们熟悉MaterialPageRoute,主要用于Flutter页面切换。 PopupRoute:在当前路由覆盖Widget模态路由。主要用于弹出框,对话框之类。...2、Flutter路由管理实现 2.1 导航器初始化         Navigator是一个有状态widget,NavigatorState在初始化时主要做了两件事: 根据配置参数创建初始化路由,初始化路由会放入...]; // 路由栈集合void initState() { _history.addAll([_RouteEntry(route, _RouteLifecycle.add)]);// 1.依据初始化构建参数创建初始化路由...3、Flutter路由管理实现总结         以上流程实现可以看出,Flutter页面栈实现依赖于: Navigator持有路由栈,提供导航方法,当路由栈发生变化时同步更新页面栈。

    2.2K30

    第132期:flutter导航和路由

    命名路由局限 尽管命名路由可以处理深层链接,但是他们表现总是一致,没办法做到自定义。当应用平台接收到一个新深层链接,不论用户此时在哪个位置,Flutter都会将新路线推送到导航器。...当我们使用Router或声明性路由包进行导航时,Navigator每个路由页面都是支持。这表示,路由是根据页面上使用了页面上参数Navigator构造函数创建路由。...如果我们使用是路由包,则页面支持路由始终是可深度链接,而无页面的路由则不是。 当航器中删除页面支持路由时,它之后所有无页面路由也将被删除。...深度链接 Deep linking Flutter支持iOS、Android和web浏览器深度链接。打开URL会在应用程序中显示该屏幕。...默认情况下,web应用程序使用模式:/#/path/to/app/screenurl片段读取深度链接路径,但这可以通过配置应用程序url策略来更改。

    2K30

    Flutter学习笔记:BottomNavigationBar实现多个Navigation

    最近我研究了一下Flutter,但是在使用Navigator时候遇到了一个很头痛问题,就是当我们去来回切换导航按钮时,Flutter会重新build,从而导致控件重新Build,从而会失去浏览历史。...在第38行,我们实现了build(方法,该方法返回一个新Navigator对象。 这需要一个key和一个initialRoute参数。...这是我们确保使用多个导航器所需。 我们脚手架身体现在是一个有三个孩子堆栈。 每个子项都在_buildOffstageNavigator()方法中构建。...看一下WillPopScope文档: 注册用户否决尝试回调以解除封闭/// [ModalRoute] 在第4行,我们定义一个onWillPop()回调,如果当前导航器可以弹出则返回false,否则返回...1_qQW2iGXiWL2F1tu6cLQfwg.gif 需要注意一点是,当我们在Android推送新路线时,会底部滑入。 相反,惯例是在iOS右侧滑入。

    4.3K20

    手把手教你如何自定义 React Native 底部导航栏

    让我们创建一个自定义 TabBar 组件开始,该组件只渲染一些文本并打印传递过来 props ,这样我们就可以看到我们航器中得到了什么 props。..., 我们可以添加以下配置作为createBottomTabNavigator 第二个参数。...现在重新编写 TabBar 组件。首先,让我们尝试重新创建默认选项卡栏。我们将在容器设置一些样式,以便将选项卡按钮排成一行,并为每个路由呈现一个选项卡按钮。...例如,当前实现假设选项卡导航器中总会有 4 个 Screen,聚光灯颜色在选项卡栏组件中是写死。...样式应该通过路由器 tabBarOptions 配置进行动态编写,这边不会讲这些,大家自己动手做做。

    7.6K20
    领券