开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

传输不带动画的页面| Navigator.of(context).pushNamed()

是指在应用程序中进行页面导航时，页面切换时没有任何过渡动画效果的情况。在移动应用开发中，通常使用导航器（Navigator）来管理页面之间的切换和导航。

在Flutter中，可以使用Navigator.of(context).pushNamed()方法来实现页面导航，其中pushNamed()方法用于导航到具有特定路由名称的页面。该方法可以接受一个路由名称作为参数，并将用户导航到具有该名称的页面。

示例代码如下：

Navigator.of(context).pushNamed('/page2');

上述代码将导航到名称为'/page2'的页面，该页面将不带任何过渡动画效果地显示在屏幕上。

在Flutter中，可以通过在应用程序的主要路由表中定义路由名称和对应的页面来实现页面导航。示例代码如下：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/page2': (context) => Page2(),
      },
    );
  }
}

在上述代码中，通过routes属性定义了两个路由，'/'对应HomePage页面，'/page2'对应Page2页面。然后可以使用pushNamed()方法导航到这些页面。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
腾讯云云原生应用引擎：https://cloud.tencent.com/product/nae
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iot
腾讯云音视频服务（VOD）：https://cloud.tencent.com/product/vod
腾讯云网络安全（SSL）：https://cloud.tencent.com/product/ssl

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

如果想自定义路由切换动画，可以自己继承PageRoute来实现，我们将在后面介绍动画时，实现一个自定义的路由Widget。..., { Object arguments, }) { return Navigator.of(context).pushNamed(routeName, arguments: arguments...已经被注册到路由表中： Navigator.of(context) .pushNamed( '/route1', arguments: { "name": 'hello...; 页面参数的传输、获取以及结果返回参数传输 Navigator.of(context).pushNamed('/route1', arguments: {"name": 'hello'}); 参数获取...; //上一个页面接收参数 Navigator.of(context) .pushNamed( '/route1', arguments: { "name": 'hello

4.6K4 0

【Flutter 实战】路由堆栈详解

，如此反复，路由堆栈中将会存放大量的购物列表和商品详细页面的路由，点击返回按钮，会将反复显示购物列表和商品详细页面。页面切换时路由动画 push 和 pop 是不同。...(context).canPop()){ Navigator.of(context).pop(); } }, ) pushNamed pushNamed 是命名路由的方式，需要在...跳转到 B： RaisedButton( child: Text('A 页面'), onPressed: () { Navigator.of(context).pushNamed('/...有 B 页面退出动画。...Navigator.of(context).pushNamed('/C'); }, ) ?

1.4K3 0

Flutter路由跳转及参数传递

image 本文要介绍的知识点用路由推出一个新页面打开新页面时，传入参数参数的回传路由做Android/iOS原生开发的时候，要打开一个新的页面，你得知道你的目标页面对象，然后初始化一个Intent...push一个新页面,pushNamed方法是有一个Future的返回值的，所以静态路由也是可以接收下一个页面的返回值的。...Navigator.of(context).pushNamed('/router/second'); // 带返回值 Navigator.of(context).pushNamed('/router/...); }) pop回上一个页面 Navigator.of(context).pop('这个是要返回给上一个页面的数据'); 动态路由的使用当需要向下一个页面传递参数时...(title: '路由是个好东西，要进一步封装'); })); 也可以用PageRouterBuilder来自定义打开动画 Navigator.of(context)

3.2K4 0

Flutter中路由返回的多种方式

返回上一级路由 Navigator.of(context).pop(); 在页面中调用这个方法可以返回进入当前页面的上一级页面。 2....替换路由 Navigator.of(context).pushReplacementNamed('目标页面路由'); 当页面中跳转顺序是A页面-B页面-C页面，如果在B页面中使用上面这个命令跳转到C页面...如果在A页面也是使用的此命令跳转到B页面，那么在C页面中返回时会返回A页面的上一级页面。 3....返回到指定的路由地址 Navigator.of(context).pushAndRemoveUntil( // 返回到指定的路由（Tabs为页面组件，需要在顶部引入，index为组件的参数)...需要注意的是，要跳转到的目标页面组件必须在顶部引入。 4.

1.3K2 0

Flutter 中路由返回的多种方式

返回上一级路由 Navigator.of(context).pop(); 在页面中调用这个方法可以返回进入当前页面的上一级页面。 2....替换路由 Navigator.of(context).pushReplacementNamed('目标页面路由'); 当页面中跳转顺序是A页面-B页面-C页面，如果在B页面中使用上面这个命令跳转到C页面...如果在A页面也是使用的此命令跳转到B页面，那么在C页面中返回时会返回A页面的上一级页面。 3....返回到指定的路由地址 Navigator.of(context).pushAndRemoveUntil( // 返回到指定的路由（Tabs为页面组件，需要在顶部引入，index为组件的参数)...iconSize: 30.0, // 选中图标的颜色 fixedColor: Colors.red, // 多个标签页的动画效果

2.3K2 0

【Flutter 专题】57 图解页面小跳转 (三)

/ pushReplacement pushReplacementNamed / pushReplacement 可以将新的页面替换掉旧的页面，旧的页面被销毁；如 A -> B ->...popAndPushNamed popAndPushNamed 可以将本页面销毁并打开新的页面，旧的页面会被销毁；如 A -> B -> C 在 B 页面采用 popAndPushNamed...上述两种方式的区别是：pushReplacementNamed / pushReplacement 直接打开 ForthPage 不会展示 ThirdPage 退出的动画效果；而 popAndPushNamed...(context).pushNamed('page4').then((results) { if (results is PopWithResults) {...路由动效在实际项目中，页面的展示方式并非单一模式，有些页面需要特定的路由效果，此时可以参考 PageRouteBuilder 自定义动画效果； PageRouteBuilder({

1.7K4 1

Flutter 入门指北之路由

Navigator 的 push 方法分两类，一类是带 Name 的，需要在 MaterialApp 下将 routers 属性进行注册，否则将会找不到该路由，还有一个是不带 Name 的，可以通过 Router...(_) => BPage())); 或者 Navigator.pushNamed(context, '/page_b'); 效果相同。...static bool pop(BuildContext context, [ T result ]) { return Navigator.of(context..., Route route) { return Navigator.of(context).push(route); } /// @optionalTypeArgs Future...，切换的动画就有开始自带的平滑效果变成缩放效果了。

8112 0

Flutter | 路由管理

，实现与平台页面切换动画风格一致切换动画 MaterialPageRoute 继承自 PageRoute 类，PageRoute 是一个抽象类，表示整个屏幕空间的一个模态路由页面，其中定义了路由构建及切换时过度动画的相关接口和属性...打开一个页面 return Navigator.of(context)!....push(route); } 将给定的路由入栈（打开页面），返回 future 对象，用于接收该路由出栈是返回的数据。关闭一个页面 Navigator.of(context)!....(context, "router_test"); }) 在点击的事件中，跳转到对于的路由页面带参数的命名路由传递 "new_page": (context) => NewRoute(), },...; //....... } 接受参数 Navigator.pushNamed(context, "new_page",arguments: "Hello World"); 在跳转的时候发送数据即可路由生成钩子

9535 0

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

MaterialPageRoute是Flutter提供的路由模板，是PageRoute的子类，定义了路由创建及切换时过渡动画的相关接口和属性，并自带页面切换动画。...(), }, initialRoute: 'firse',//初始路由页面 ) 在路由表中注册好页面后，在其他页面中通过Navigator.pushNamed()来打开注册的页面。...Navigator.pushNamed(context, 'second'); Flutter提供了一个onUnknownRoute属性，用来在注册路由表时对未知的路由标识符进行统一的页面跳转处理。...不同的是，popAndPushNamed会同时执行出栈和入栈动画，而pushReplacementNamed只执行入栈动画。...9.3 自定义路由如果要修改默认的路由转场动画，就需要做一些自定义开发。

1.1K2 0

Flutter | 路由管理

实现与平台页面切换动画风格一致切换动画 MaterialPageRoute 继承自 PageRoute 类，PageRoute 是一个抽象类，表示整个屏幕空间的一个模态路由页面，其中定义了路由构建及切换时过度动画的相关接口和属性...>(BuildContext context, Route route) { return Navigator.of(context)!....result ]) { Navigator.of(context)!....: () { Navigator.pushNamed(context, "router_test"); }) 复制代码在点击的事件中，跳转到对于的路由页面带参数的命名路由传递 routes: {.......... } 复制代码接受参数 Navigator.pushNamed(context, "new_page",arguments: "Hello World"); 复制代码在跳转的时候发送数据即可

8562 0

Flutter开发-路由

Navigator可以通过route入栈和出栈来实现页面之间的跳转。 Flutter的路由有两种方式基本路由命名路由基本路由就相当于Android和iOS原生的页面跳转方式。...context) { return HomePage(); })); 关闭页面 Navigator.pop(context); 除了页面关闭用这个方法，窗口的关闭也是用这个方法，因为Flutter的...###　返回根路由 Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new...Navigator.pushNamed(context, "/home"); 带参数 Navigator.pushNamed(context, '/home', arguments: {"id": 20...###　返回根路由 //flutter 登录后跳转到根路由 Navigator.of(context).pushNamedAndRemoveUntil( '/home', (route)

7822 0

Flutter开发（15）- 路由导航

), onPressed: () => _onBackTap(context), ) // 按钮点击执行的代码 _onBackTap(BuildContext context) { Navigator.of...： _onPushTap(BuildContext context) { Navigator.of(context).pushNamed("/detail"); } 在开发中，为了让每个页面对应的routeName...pushNamed时，如何传递参数： _onPushTap(BuildContext context) { Navigator.of(context).pushNamed(HYDetailPage.routeName...： RaisedButton( child: Text("打开关于页"), onPressed: () { Navigator.of(context).pushNamed(HYAboutPage.routeName...RaisedButton( child: Text("打开未知页面"), onPressed: () { Navigator.of(context).pushNamed("/abc"); }, ) 我们可以创建一个错误的页面

9802 0

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

路由做Android/iOS原生开发的时候，要打开一个新的页面，你得知道你的目标页面对象，然后初始化一个Intent或者ViewController，再通过startActivity或者pushViewController...来推出一个新的页面，不能跟web一样，直接丢一个链接地址就跳转到新的页面。...SecondPage(), }, ); 在需要做路由跳转的时候直接使用： Navigator.pushNamed(context, "secondPage"); 构建路由 Navigator.push...和跳转时的方式一样，甚至更简单，只需要： Navigator.of(context).pop('这个是要返回给上一个页面的数据'); 收但是，在接受返回时的数据需要改造前面触发跳转时的路由： //...命名路由 Navigator.pushNamed<String (context, "ThirdPage").then( (String value){ //处理代码 }); // 构建路由 Navigator.push

1.4K2 0

Flutter 路由参数传递及接收

Navigator 的 push 和 pop方法 Navigator 导航器的 push 和 pop 方法可以携带参数在页面间传递，其他变形的方法也一样。...pushNamed 方法原型如下： Future pushNamed( String routeName, { Object?...这里 pushNamed 携带了一个 Map 对象将列表的 id传递到详情页。...(context) .pushNamed(RouterTable.dynamicDetail, arguments: routeParams); ScaffoldMessenger.of...目前这种路由管理也会存在一定的不便之处，比如无法像网页的 url 一样在路径名传递可变参数，以及无法控制页面跳转的转场动画。

1.2K0 0

Flutter版本玩Android(3)——文章详情页

本文主要包含路由的跳转以及WebView显示文章详情页。效果如下： ? 路由跳转 Flutter通过Navigator类来进行页面路由的管理。...push：指定跳转的widget pushNamed：命名路由，string--->widget pushXXX表示跳转到下一页面，pop表示跳出当前页面，可以携带参数跳转。具体可以参考路由管理。...携带参数跳转 Navigator.of(context).pushNamed(RouteTableConst.ARTICLE_PAGE, arguments: {...'url': articleItem.link, 'title': articleItem.title }); 获取前一个页面的参数...(context).pop(); } }); } else { Navigator.of

8082 1

Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展

概述路由跳转的几种方式；路由常用API；路由的发送和接收数据的使用；路由使用中可能遇到的问题与解决方案；路由跳转的方式单一页面跳转（A页面 --- B页面）多个页面路由管理（A页面...两个页面间简单的页面传输【Push方向（发送数据），】 ContentPage跳转到PageOne，把要传输的数据交给PageOne的构造函数， PageOne接收数据并显示： ? ?...await Navigator.of(context).pushNamed(namedStr); return datas; } 应用跳转： ?...主页面和非主页面的跳转方式选择可能不太一样刚刚上面提到了，跳转的方式主要是两种： push() pushNamed() 主页面除了常规的 push()配置方法外，还有MyApp类，可以用来配置命名路由...{ var datas = await Navigator.of(context).pushNamed(namedStr); return datas; } @override

3.3K1 0

从零开始的Flutter之旅: Navigator

= null && token.isNotEmpty)) { Navigator.of(context).push(MaterialPageRoute(builder: (context)...它会提供一个builder方法，我们直接在builder中返回想要跳转的页面实例即可。它继承于PageRoute，PageRoute是一个抽象类，它提供了路由切换时的过渡动画效果与相应的接口。...而MaterialPageRoute通过这些接口来实现不同平台上对应风格的路由切换动画效果。...Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context){ return HomePage()...对应的方法还有pushNamed()与pushNamedAndRemoveUntil() 对于命名路由的参数传递与之前最后面介绍的参数传递方式类似，例如 Navigator.of(context

7471 0

flutter系列之:创建一个内嵌的navigation

简介我们在flutter中可以使用Navigator.push或者Navigator.pushNamed方法来向Navigator中添加不同的页面，从而达到页面调整的目的。...比如我们有一个主页面app的Navigator，然后里面有一个匹配好友的功能，这个功能有多个页面，因为匹配好友功能的多个页面实际上是一个完整的流程，所以这些页面需要被放在一个子Navigator中，并和主...而这个flow页面实际上是由几个子页面组成的：选择好友页面，等待页面，匹配页面和匹配完毕页面。具体的页面代码这里就不写了，我们主要来讲一下子路由的使用。...很简单，调用Navigator.of的pop方法即可： void _exitSetup() { Navigator.of(context).pop(); } 这里的context默认是全局的...context,所以会导致主路由的跳转变化。

2421 0

Flutter常见的路由跳转

// 保留路由的栈 Navigator.pushNamed(context, '/search'); // 不保留栈 Navigator.of(context).pushReplacementNamed...('/search'); // 返回上一级页面 Navigator.of(context).pop(); import '..../Tabs.dart'; //需要引入根目录 // 返回到根页面 Navigator.of(context).pushAndRemoveUntil( //初始化根页面，Tabs为根页面,index...:1是可传参数 new MaterialPageRoute(builder: (context) => new Tabs(index:1)), (route) => route == null)

4551 0

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...future = Navigator.of(context).pushNamed("/pageB"); future.then((value) { showDialog( context: context

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭