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

Flutter:当我要转到一个新屏幕并返回时,我如何保持我所选择的导航器

Flutter是一种跨平台的移动应用开发框架,可以帮助开发者快速构建高性能、美观的移动应用程序。在Flutter中,要保持所选择的导航器(Navigator)在切换到新屏幕并返回时,可以通过以下步骤实现:

  1. 导入相关库:在Flutter项目中,首先需要导入flutter/material.dart库,该库提供了与导航器相关的类和方法。
  2. 创建导航器:使用MaterialAppCupertinoApp作为应用程序的根部件,并在其中创建一个Navigator对象。例如:
代码语言:txt
复制
MaterialApp(
  home: MyHomePage(),
  navigatorKey: GlobalKey<NavigatorState>(),
)
  1. 导航到新屏幕:当需要切换到新屏幕时,可以使用Navigator.push()方法将新的屏幕推入导航器的栈中。例如:
代码语言:txt
复制
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);
  1. 返回到上一个屏幕:当需要返回到上一个屏幕时,可以使用Navigator.pop()方法从导航器的栈中弹出当前屏幕。例如:
代码语言:txt
复制
Navigator.pop(context);
  1. 保持导航器状态:为了保持所选择的导航器在切换到新屏幕并返回时的状态,可以使用GlobalKey<NavigatorState>()创建一个全局的导航器键,并将其分配给navigatorKey属性。这样,即使在切换屏幕后,导航器的状态也会被保留。例如:
代码语言:txt
复制
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

MaterialApp(
  home: MyHomePage(),
  navigatorKey: navigatorKey,
)

然后,在需要导航的地方使用navigatorKey.currentState.push()navigatorKey.currentState.pop()来执行导航操作。

这样,无论是切换到新屏幕还是返回上一个屏幕,所选择的导航器都会保持状态。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

请注意,以上答案仅供参考,具体实现方式可能因个人需求和项目结构而有所差异。

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

相关·内容

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

最近研究了一下Flutter,但是在使用Navigator时候遇到了一个很头痛问题,就是当我们去来回切换导航按钮Flutter会重新build,从而导致控件重新Build,从而会失去浏览历史。...MaterialPageRoute负责创建推送新路由。 Navigator.of(context)在窗口控件树中找到Navigator,使用它来推送route。...在第38行,我们实现了build(方法,该方法返回一个Navigator对象。 这需要一个key和一个initialRoute参数。...如果我们编译运行应用程序,现在一切都按照预期方式工作。 我们可以独立地推送/弹出每个导航器,并且后台导航员保持他们状态。?...使用Offstage小部件可确保我们所有导航器保留其状态,因为它们保留在控件树中。 这可能会带来一些性能损失,因此如果您选择使用它,建议您分析您应用。 可以在此处找到本文完整源代码

4.2K20

深入探究Flutter页面导航器:Navigator详解

页面跳转: 我们可以使用Navigator来实现页面之间跳转,无论是从一个页面跳转到一个页面,还是从一个页面返回到上一个页面。...页面路由管理: 在Navigator中,每个页面都是一个路由对象(Route)。当我们跳转到一个页面,会将对应路由对象压入到路由栈中,成为当前页面。...而当我们从页面返回,会将当前页面对应路由对象从路由栈中弹出,返回到上一个页面。...这样就实现了从当前页面跳转到名为SecondPage新页面。 2. 页面返回实现页面的返回操作,我们可以使用Navigator.pop方法。...导航器嵌套允许我们在一个页面内部创建多个导航器分别管理它们之间导航栈,从而实现更灵活和复杂页面管理。本节将学习如何Flutter应用中实现导航器嵌套,演示如何在多个导航器之间进行导航。

45110

Flutter』导航器

1.前言 在上篇文章中,介绍了Flutter中常用组件之表单组件,本文将继续介绍Flutter中常用组件之导航器。...2.导航器 2.1.导航器简介 Flutter 航器(Navigator)是用于在应用中管理页面(也称为路由)堆栈一个关键组件。...堆栈结构 例如我们显示 b 页面,那么就会将 a 页面压入堆栈,然后显示 b 页面,当我们点击 b 页面的返回按钮,就会将 b 页面弹出堆栈,然后显示 a 页面。...,第一个页面包含一个按钮,点击按钮后会跳转到第二个页面,第二个页面包含一个按钮,点击按钮后会返回到第一个页面。...通过 Navigator.push 与 MaterialPageRoute 方式进行页面跳转,跳转到目标页面左上角会有一个返回按钮,点击返回按钮也会返回到上一个页面,这个返回按钮是 Flutter 自动添加

15020

Flutter开发之路由与导航实现

push():将给定路由入栈,返回值是一个Future对象,用以接收路由出栈返回数据。 pop():将栈顶路由出栈,返回结果为页面关闭返回给上一个页面的数据。...打开一个页面,只需要创建一个MaterialPageRoute对象实例,然后调用Navigator.push()方法将新页面压到路由堆栈顶部即可,如果返回一个页面,则可以调用Navigator.pop...对应这类问题,移动应用有一个通用解决方案,即跳转到一个统一错误页面。在注册路由表Flutter提供了一个UnknownRoute属性,用来对未知路由标识符进行统一页面跳转处理,如下所示。...要想跳转到其他子路由管理页面,就需要在根导航器中进行注册,也就是MaterialApp内部航器。 路由传参 在移动应用开发中,页面参数传递也是一个比较常见需求。...MaterialPageRoute 是Material组件库提供组件,它可以针对不同平台,实现与平台页面切换动画风格一致路由切换动画:当打开页面页面会从屏幕右侧边缘一致滑动到屏幕左边,直到新页面全部显示到屏幕

3.2K10

你不可避免 Flutter Routes

如果你开发过单页应用并且使用过 react-dom-router ,那么对于一个 Web App 来说通过路由跳转到一个页面对于你业务来说有多么重要。...提供功能; 在这一篇文章里,我们将学习到如何为 AVUpdateState 添加一个 _push 方法和导航器; ?..._push 方法,并且在 appBar 中添加一个稍微好看一些按钮,选择是 Icons.account_balance ,在 onPressed 中调用我们已经定义 _push 方法。...App 页面,在 builder 中 直接返回一个 Scaffold 并且定义了一个 appBar 显示 new Page。...不过,这样路由看起来还非常简陋,想象一下当我们使用 React 路由跳转可以很方便利用命名来完成,在 Flutter 里,我们也可以完成这样映射关系,只不过我们需要在 MaterialApp

72820

flutter路由

路由管理控制 路由是一个应用程序抽象屏幕或页面; 路由管理就是管理页面之间如何跳转; 路由入栈指打开一个新页面; 路由出栈指一个页面关闭操作; 路由管理指如何来管理路由栈; Navigator是一个管理路由...MaterialApp,这个上下文不包含Navigator导航器操作, 所以我们应该把home那部分抽出来放另一个类; 路由传值返回值 路由传参在上面那个例子已经有了,num就是我们参数,然后显示在标题上就是使用了...这节教大家路由传值返回值,创建个NewPage,接收个文本值text,然后显示在新页面,新页面给个返回按钮, 点击返回按钮返回带回一串值回去。...(21935): 接收到参数:返回值 直接点击左上角那个返回值会为空,这样打印出来就是: I/flutter (21935): 接收到参数:null 所以我们做了一个判断,不为空才执行打印...路由动画理论 路由动画就是我们跳转到一个路由栈时候产生过度动画,官方提供了两个动画:MaterialPageRoute、CupertinoPageRoute; 解释: MaterialPageRoute

1.7K20

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

你可以通过以上7种导航器来创建你APP,可以是其中一个也可以多个组合,这个可以根据具体应用场景结合每一个航器特性进行选择。...navigationOptions(屏幕导航选项): 通过navigationOptions可以定制导航器显示屏幕方式(例如:头部标题,选项卡标签等); 导航器支持Props const SomeNav...:返回父导航器; 注意:一个navigation有可能没有navigate、setParams以及goBack,只有state与dispatch,所以在使用navigate进行判断,如果没有navigate...这些功能是: this.props.navigation push - 导航到堆栈中一个路由 pop - 返回堆栈中一个页面 popToTop - 跳转到堆栈中最顶层页面 replace...push Push - 在堆栈顶部添加一条路由,导航至该路由. 与navigate区别在于,如果有已经加载页面,navigate方法将跳转到已经加载页面,而不会重新创建一个页面。

4.3K30

两分钟带你掌握Flutter路由与导航

在这篇文章中,将带着大家一起认识什么是Flutter路由与导航,如何完成不同页面跳转?,如何获取路由跳转返回记过?,以及如何转到其他APP?...Android: 要在Flutter中切换屏幕,我们可以访问路由以绘制Widget。 管理多个屏幕有两个核心概念和类:Route 和 Navigator。...Navigator 工作原理和 iOS 中 UINavigationController 非常相似,当你想跳转到新页面或者从新页面返回,它可以 push() 和 pop() 路由。...举个例子,转到“位置”路由来让用户选择一个地点,你可能这么做: Map coordinates = await Navigator.of(context).pushNamed('/location...怎么跳转到其他 App? 在 iOS 中,转到其他 App,你需要一个特定 URL Scheme。对系统级别的 App 来说,这个 scheme 取决于 App。

2.1K20

开始使用-编写你一个Flutter应用程序 顶

你会建立什么 您将实施一个简单移动应用程序,为一家创业公司生成建议名称。 用户可以选择和取消选择名称,保存最好名称。 该代码一次生成十个名称。 当用户滚动,会生成批次名称。...如何实现有状态小部件。 如何创建一个无限,延迟加载列表。 如何创建导航到第二个屏幕如何使用主题更改应用程序外观。...lib/main.dart 第6步:导航到屏幕 在这一步中,您将添加一个显示收藏夹屏幕(在Flutter中称为路由)。 您将学习如何在主路由和新路由之间导航。...在Flutter中,导航器管理包含应用程序路由堆栈。 将路由推入导航器堆栈,将显示更新为该路由。 从导航器堆栈中弹出路由,将显示返回到前一个路由。...最喜欢一些选择点击应用栏中列表图标。 新路线显示包含收藏夹。 请注意,导航器会在应用栏中添加一个返回”按钮。 你不必显式实现Navigator.pop。 点击后退按钮返回到主页路由。 ?

9.5K20

从navigator到react-navigation进阶教程

你可以通过以上三种导航器来创建你APP,可以是其中一个也可以多个组合,这个可以根据具体应用场景结合每一个航器特性进行选择。...navigationOptions(屏幕导航选项): 通过navigationOptions可以定制导航器显示屏幕方式(例如:头部标题,选项卡标签等); 导航器支持Props const SomeNav...state发生改变,都会回调该方法; prevState:变化之前state; newState:state; 导致state变化action; screenProps:向子屏幕传递额外数据...Screen Navigation Prop(屏幕navigation Prop) 当导航器屏幕被打开,它会收到一个navigation prop,navigation prop是整个导航环节关键一员...,就是要想法获取navigation; 那么,如何才能在非导航器中所定义屏幕中获取到这个navigation呢?

3.9K30

react-navigation导航器

补白 概念 在开始学习导航器之前,我们需要了了解两个和导航有关概念: Screen navigation prop(屏幕导航属性):通过navigation可以完成屏幕之间调度操作,例如打开另一个屏幕...:SwitchNavigator用途是一次只显示⼀个⻚页⾯面 你可以通过以上几种导航器来创建你APP,可以是其中一个,也可以多个组合,这个可以根据具体应 ⽤场景结合每⼀个导航器特性进⾏选择...createStackNavigator 提供APP屏幕之间切换能⼒,它是以栈形式还管理屏幕之间切换,切换到屏幕会放在栈顶部。...:订阅导航生命周期更新 isFocused:true标识屏幕获取了焦点 getParam:获取具有回退特定参数 dangerouslyGetParent:返回父导航器 注意:一个navigation...一个action。

6.2K20

Flutter 构建完整应用手册-导航器

导航到屏幕返回 大多数应用程序包含几个用于显示不同类型信息屏幕 例如,我们可能有一个显示产品屏幕。 然后,我们用户可以在屏幕上点击产品以获取更多信息。...现在我们在第二个屏幕上,我们如何关闭它返回到第一个屏幕?...从屏幕返回数据 在某些情况下,我们可能想要从新屏幕返回数据。 例如,假设我们推出一个屏幕,向用户呈现两个选项。 当用户点击某个选项,我们需要通知第一个屏幕用户选择,以便它能够处理这些信息!...当用户点击按钮,应该关闭选择屏幕让主屏幕知道哪个按钮被点击! 现在,我们将定义UI,确定如何在下一步中返回数据。...当用户点击图像,我们希望将图像从第一个屏幕动画到第二个屏幕。 现在,我们将创建视觉结构,并在接下来步骤中处理动画! 注意:本示例建立在导航到屏幕返回和处理点击食谱上。

4.9K10

React Native 导航:示例教程

移动应用程序由多个屏幕组成。在构建移动应用程序时,首要考虑如何处理用户在应用程序中导航问题,例如屏幕展示和屏幕之间切换。...React Navigation 提供了一个基于堆栈导航模型,允许屏幕被推入和弹出导航堆栈。通过堆栈导航,你可以使用一个堆栈导航器来定义你应用程序导航结构,该导航器维护着一个屏幕堆栈。...任何给定时间只有一个屏幕呈现给用户,每个屏幕在被推入堆栈显示,即当用户导航到某个屏幕,它就被推到堆栈顶部。 想象一堆纸张。导航到一个屏幕会将其放在堆栈顶部,而导航回去则会将其从堆栈中移除。...这就是为什么我们可以在 HomeScreen.js 上一个按钮上使用它,当按下,会导致页面跳转到 AboutScreen,如下所示: <Button title="Go to About" onPress...它会返回一个带有编程操作导航对象。

20310

第132期:flutter导航和路由

导航和路由 Flutter提供了一个完整用于在屏幕之间导航和处理深层链接系统。...命名路由局限 尽管命名路由可以处理深层链接,但是他们表现总是一致,没办法做到自定义。当应用平台接收到一个深层链接,不论用户此时在哪个位置,Flutter都会将路线推送到导航器上。...之类路由包,该包可以在应用程序收到深度链接解析路由路径配置Navigator。...当我们使用Router或声明性路由包进行导航,Navigator上每个路由页面都是支持。这表示,路由是根据页面上使用了页面上参数Navigator构造函数创建路由。...如果我们使用是路由包,则页面支持路由始终是可深度链接,而无页面的路由则不是。 当从导航器中删除页面支持路由,它之后所有无页面路由也将被删除。

2K30

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

ModalRoute:阻止与下层路由交互路由。它覆盖整个导航器。但它们不一定是不透明。例如一个对话框。主要处理事件拦截。 PageRoute:替换整个屏幕模态路由。...它维护了一个路由栈集合(List),当你调用push,pop方法,Navigator都会以栈方式对这个集合进行添加或删除,通过路由栈状态变化实现对页面栈更新。...Navigatorwidget构建流程如下:  当我们想使用导航操作,Navigator提供了如下几个常用方法: // 路由跳转:传入一个路由对象Future push...2、Flutter路由管理实现 2.1 导航器初始化         Navigator是一个有状态widget,NavigatorState在初始化时主要做了两件事: 根据配置参数创建初始化路由,初始化路由会放入...---- 至此,我们了解到了Flutter端是如何去实现路由管理,那么,就请期待我们最后一篇文章《大前端开发中路由管理之六:总结篇》。

2.2K30

Flutter』命名路由

1.前言 在上一篇文章中,我们介绍了如何使用 Flutter航器进行路由跳转,但是在实际开发中,我们往往会使用命名路由方式进行跳转,本文将介绍如何使用命名路由进行跳转。...点击按钮,会使用 Navigator.pushNamed 方法跳转到第二个页面。...之前导航器路由跳转示例中,我们使用是 Navigator.push 方法,它需要传入一个 Route 对象,而 Navigator.pushNamed 方法则不需要传入 Route 对象,只需要传入路由名称即可...如上代码来分别解释一下: initialRoute: '/second',这里指定了初始路由为 '/second',所以应用启动后会直接跳转到第二个页面。...您每一条评论对都至关重要,我会尽快给予回复。 如果您觉得这篇文章对您有所启发或帮助,请不吝赞赏、收藏或分享。 您一个动作都是对创作最大鼓励和支持。 谢谢您阅读和陪伴!

19010

Flutter学习

Flutter中,因为widget是不可变,所以没有addChild。相反,您可以传入一个函数,该函数返回一个widget给父项,通过 布尔值控制该widget创建。..., // floatingActionButton移动到一个位置动画 this.persistentFooterButtons, // 多状态按钮 this.drawer, // 左侧抽屉菜单...Flutter不具有Intents概念,但如果需要的话,Flutter可以通过Native整合来触发Intents。 要在Flutter中切换屏幕,您可以访问路由以绘制Widget。...在Flutter中,导航器管理应用程序路由栈。将路由推入(push)到导航器栈中,将会显示更新为该路由页面。 从导航器栈中弹出(pop)路由,将显示返回到前一个路由。...中如何使用原生控件或组件 Flutter代码通常涉及构建相当深树状数据结构,例如在一个build方法中。

2.6K20

怎样创建你一个React Native App

因此,你需要学习如何用 React Native Starter 创建全新移动应用程序,了解其设计模式尝试理解如何确保主代码干净且可扩展。 ?...首先,所有创建应用程序的人通常都会面临相同旧问题。这包括需要了解选择适当技术栈,正确添加导航方法以及知道管理其数据方法等。...首先,为 React Native Starter 提供了一个默认主题(也很棒),但是你选择一个黑暗主题。...结论 如你所见,使用 React Native Starter 开始一个全新应用非常简单。你可以在一小内精确为应用开发样板代码,并且无需花费大量工作或设计知识。...这就是在开始一个移动应用项目,React Native Starter 居于首位原因!

2.1K20

Flutter 1.22 正式发布

除了对移动操作系统版本支持外,还有很多其他分享新闻,包括预览Android最重要功能之一:状态恢复,“Material 风格按钮“,国际化和本地化支持(与热重载一起使用),一个Navigator...举例来说,假设您想在首页上显示一系列小部件,允许用户点击一个小部件以转到专门针对该颜色详细信息页面。 ?...我们创建一个_selectedColor,以指示尚未选择任何颜色,因此我们最初不显示ColorScreen。...当用户选择一种颜色,我们通常会调用setState()来向Flutter表示您希望再次调用build()方法,该方法现在会创建一个堆栈,其顶部是ColorScreen。...当我们确定这是最好体验,我们计划在以后版本中默认启用此标志。 统一Dart开发人员工具 与往常一样,对Flutter更新不仅意味着引擎和框架,还包括工具。

7.4K20

手把手教你如何在Windows安装Anaconda

本教程包括: 如何在Windows上下载安装Anaconda 如何测试您安装 如何解决常见安装问题 安装Anaconda后该怎么办 下载安装Anaconda 1.转到 Anaconda网站,...如果您没有权限在想要位置安装anaconda或在路径中添加anaconda,请以管理员身份安装。 当出现以下屏幕,单击“下一步”。 ? 3.阅读许可协议,然后单击同意。 ?...4.选择“仅”(推荐)或“所有用户”。 ? 如果不确定选择哪个选项,请选择“仅”,因为如果您没有管理员权限,这可以缓解潜在问题。 5.请记下您安装位置(1),然后单击“下一步(2)”。...屏幕外观可能会有所不同,具体取决于您使用Windows版本。 5.打开一个 命令提示符。尝试 在“ 命令提示符”中键入 conda --version 检查是否一切正常。...如果您遇到此错误,并且安装库,请以管理员 身份打开命令提示符/ anaconda提示符或anaconda导航器 以安装软件包。 ? DLL加载失败:找不到指定模块 ?

2.7K10
领券