文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter 专题】09 页面间小跳转 (一)

，关键词就是 push 和 pop，和尚分别从这两个关键词来测试 Flutter 页面间的跳转。..."homeRoute", (route) => route == null); } Tips: 如果在 HomePage 页面中调用 Navigator.pop(context); 会出现半个黑屏情况...2.1 push 方法单纯跳转页面 Navigator.push 向下个页面跳转时，可以传递参数，自己生成页面对象；如： onPressed: () { Navigator.push<Object...}, ), (route) => route == null); pop 出栈 1. pop 销毁当前页面 Navigator.pop 可以有一个参数或两个参数，如果只有一个参数，为上下文环境；如果两个参数...---- then 返回值 有了页面跳转，就需要传递参数和接收返回内容，当跳转后的页面设置 Navigator.pop 设置返回值时，用 then 关键词可以接收，测试如下： // MyApp

1.1K31
您找到你想要的搜索结果了吗？
是的
没有找到

Flutter路由的跳转、动画和传参详解（最简单）

Flutter路由介绍 Flutter里面有路由支持所有的路由场景，push、pop页面，页面间的参数传递等等。flutter里面的路由可以分成两种，一种是直接注册，不能传递参数。...SecondPage(), }, ); 在需要做路由跳转的时候直接使用： Navigator.pushNamed(context, "secondPage"); 构建路由 Navigator.push...因此，我们只能使用构建路由的方式传参: Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){ return...传 当触发路由返回的事件时，传参是十分简单的。...和跳转时的方式一样，甚至更简单，只需要： Navigator.of(context).pop('这个是要返回给上一个页面的数据'); 收 但是，在接受返回时的数据需要改造前面触发跳转时的路由： //

1.3K20

【错误记录】Flutter 界面跳转报错 ( Navigator operation requested with a context that does not include a Naviga )

文章目录 一、报错信息 二、问题分析 三、解决方案 一、报错信息 ---- Flutter 界面跳转时 , 报如下错误 : ======== Exception caught by gesture ==...The context used to push or pop routes from the Navigator must be that of a widget that is a descendant...builder: (context){ /// 跳转到的新界面再此处定义 return MaterialApp...上面是 MaterialApp 的注释 , MaterialApp 中会自动创建一个 Navigator , 此处使用了 MaterialApp 仍然报上述错误 ; Navigator 查找机制 : 这是由于调用了...时 , 越过了 MaterialApp , 直接从最顶层的 StatelessWidget 组件开始向上查找 , 肯定找不到 Navigator , 这里直接报错了 ; 这是由于 Navigator

48910

【Flutter】Flutter 页面跳转 ( 路由 Route | 导航器 Navigator | 页面关闭 )

Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage())); 二、路由信息注册 ---- 注册路由 :..." 字符串 , LayoutPage 页面组件对应的路由名称是 " LayoutPage " 字符串 , 三、通过路由名实现页面跳转 ---- 通过路由名实现页面跳转 : 调用 Navigator 的...(context, "LayoutPage"); }, child: Text("通过路由名跳转到页面1"), ), 四、通过路由名实现页面跳转 ---- 调用 Navigator.push 方法实现页面跳转..., 此处第二个参数传入 MaterialPageRoute 类型对象 , 代码如下 : Navigator.push(context, MaterialPageRoute(builder: (context...---- 在 AppBar 组件中设置回退按钮点击事件 , 调用 Navigator.pop(context) 方法 , 即可退出当前界面 ; // 退出当前界面 Navigator.pop(context

2.5K00

《Flutter》-- 9.路由与导航

Navigator组件的常用操作方法： 1）push()：将给定的路由页面放到路由栈里面，返回值是一个Future对象，用于接收路由出栈时的返回数据； 2）pop()：将位于栈顶的路由从路由栈移除，返回结果为路由关闭时上一个页面所需的数据...如果要打开一个新的页面，需要创建一个MaterialPageRoute对象实例，然后调用Navigator.push()；如果要返回上一个页面，调用Navigator.pop()。...Navigator.pushNamed(context, 'second'); Flutter提供了一个onUnknownRoute属性，用来在注册路由表时对未知的路由标识符进行统一的页面跳转处理。...1）pushReplacementNamed 使用pushReplacement或pushReplacementNamed打开一个新页面时，路由栈顶部的页面会被当前页面所替换。...popUntil没有执行push操作，直接执行pop操作，直到返回到指定的页面。

1K20

深入探究Flutter中的页面导航器：Navigator详解

下面我们来学习如何在Flutter中进行页面路由导航，以及如何使用Navigator.push和Navigator.pop进行页面的跳转和返回操作。 1....Navigator.pop(context); 在上面的示例中，我们调用Navigator.pop方法，实现了从当前页面返回到上一个页面的操作。...当用户从第一个页面跳转到第二个页面时，Hero动画会自动触发，实现共享元素的平滑过渡效果。...在多个导航器之间进行导航： 要在多个导航器之间进行导航，我们可以通过GlobalKey来获取对应的NavigatorState，并调用其push和pop等方法来进行页面跳转和返回。...另外，也可以使用SharedPreferences或数据库等持久化方案来存储和获取数据。 如何在页面返回时传递数据？ 可以通过Navigator.pop方法的第二个参数来传递数据。

67910

Flutter中的路由与跳转

“Page2”，要跳转的页面是Page2，每当我们点击屏幕正中央的button都会触发调用 Navigator.of(context).pushNamed(“/page2”); Navigator就是在在...页面出栈 ---- 在Flutter中我们可以使用Navigator.of(context).pop()进行出栈操作，但是值得注意的时如果页面上有Dialog、BottomSheet、popMenu类似的...处理出栈页面返回值 在前面我们介绍到Navigator.of(context).pop()可以使得页面出栈，当然这个pop方法也是可以传值的，只用Navigator.of(context).pop(attrs...)就可以传入自己想要返回的值 第二个页面，我们调用 Navigator.of(context).pop("我是第二个页面返回的数据：$title"); 在第一个页面我们接收第二个页面返回的值 Future...小结 ---- 使用Navigator.of(context).pushName(“/“)可以进行静态路由的跳转 使用push(Route)可以进行态路由的跳转 动态路由可以传入未知数据 使用pop()

1.5K20

Flutter中如何使用WillPopScope的示例代码

App中有多个Navigator 我们的App通常是在MaterialApp和CupertinoApp下，MaterialApp和CupertinoApp本身有一个Navigator，所以默认情况下调用...Navigator.pop或者Navigator.push就是在操作此Navigator。...在使用TabView、BottomNavigationBar、CupertinoTabView这些组件时，希望有多个Tab，但每个Tab中有自己的导航行为，这时需要给每一个Tab加一个Navigator...使用TabView、BottomNavigationBar、CupertinoTabView这些组件时也是一样的原理，只需在每一个Tab中加入Navigator，不要忘记指定key。...总结 到此这篇关于Flutter中如何使用WillPopScope的文章就介绍到这了,更多相关flutter使用WillPopScope内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持

2.7K40

Flutter开发之路由与导航的实现

作为官方提供的路由管理组件，Navigator提供了一系列方法来管理路由栈，其中最常用的两个方法是push()和pop()，它们的含义如下。...push()：将给定的路由入栈，返回值是一个Future对象，用以接收路由出栈时的返回数据。 pop()：将栈顶路由出栈，返回结果为页面关闭时返回给上一个页面的数据。...除了push()和pop()方法外，Navigator还提供了很多其它实用的方法，如replace()、removeRoute()和popUntil()等，可以根据使用场景合理的选取。...要打开一个新的页面，只需要创建一个MaterialPageRoute对象实例，然后调用Navigator.push()方法将新页面压到路由堆栈的顶部即可，如果要返回上一个页面，则可以调用Navigator.pop...具体来说，就是在使用push()方法打开目标页面时，可以设置目标页面关闭时监听函数来获取返回参数，当目标页面关闭路由时使用pop()方法回传参数即可。

3.2K10

Flutter路由管理和页面参数的传递（获取&返回）

我们在通过路由名称入栈新路由时，应用会根据路由名称在路由表中找到对应的WidgetBuilder回调函数，然后调用该回调函数生成路由widget并返回。...通常当前屏幕显示的页面就是栈顶的路由。Navigator提供了一系列方法来管理路由栈，我们主要使用 push 和 pop 连个操作进行页面的入栈和出栈。...push 将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。...Navigator.push( context, new MaterialPageRoute(builder: (context) => new SecondScreen()), ).then(...print(data.toString()); }; pop 将栈顶路由出栈，入参为一个 object 类型的对象为当前页面关闭时返回给上一个页面的数据。

4.4K40

你不可避免的 Flutter Routes

在 Flutter 里路由的切换也同等重要，相应的 Flutter 的导航器管理着应用程序的路由栈，将页面 push 到导航器中或 pop 出导航器，这一点上非常类似 react-dom-router...方法，并且在 appBar 中添加一个稍微好看一些的按钮，我选择的是 Icons.account_balance ，在 onPressed 中调用我们已经定义的 _push 方法。..._push 方法中我们会使用到 Navigator 和 MaterialPageRoute ，当用户点击那个 icon 时我们会创建一个路由并将其 push 到导航管理器栈中。...相应的，我们也可以使用 Navigator.of(context).pop 来返回上一个页面。...不过，这样的路由看起来还非常的简陋，想象一下当我们使用 React 时路由的跳转可以很方便的利用命名来完成，在 Flutter 里，我们也可以完成这样的映射关系，只不过我们需要在 MaterialApp

73220

Flutter学习教程之Route跳转以及数据传递

而且Flutter当中叫做Route，它就是与用户打交道的页面。本文详细探索一下Flutter当中页面之间是怎么交互的。...从上一个页面A跳转下一个页面B，有两种方式： 通过Navigator.push()跳转 通过Navigator.pushName()跳转 返回上一个页面：Navigator.pop(); 提示：通过Navigator.pushNamed...代码如下： //第一种：通过Navigator.push()跳转，类似Android中的startActivity(),指定Activity类名这种方式; Navigator.push(context...); //返回上一个页面，类似Activity的finish()； Navigator.pop(context); 页面跳转并携带数据 基于上面的两种跳转方式，对应有两种 1、通过Navigator.push...'), ); //回到上一个页面A，需要接值的话，在点击去下一个页面的需要使用到async延迟接收 //当BuildContext在Scaffold之前时，调用Scaffold.of(context)

78710

Flutter | 路由管理

Navigator.push(context, MaterialPageRoute(builder: (context) { return NewRoute()...> push(BuildContext context, Route route) { return Navigator.of(context)!....push(route); } 复制代码 将给定的路由入栈（打开页面），返回 future 对象，用于接收该路由出栈是返回的数据。...，是否需要密码等，如果每次打开路由的时候都要去判断一下会非常麻烦，这种情况可以通过 MaterialApp 实现 MaterialApp 有一个 onGenerateRoute 属性，他在打开路由时可能会被调用...，之所以说可能，是应为当调用 Navigator.pushNamed() 打开路由时，如果指定的路由在路由表中已经注册，则会调用路由表中的 builder 函数来生成路由组件；如果路由表中没有注册，才会调用

83420
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券