Flutter Navigator -推送到同一页 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Flutter 动画篇 (Hero 动画)

在 Flutter 中，图像从当前页面转到另一个页面称为 hero 动画，相同的动作有时也被称为共享元素过渡。引自-->. docs.flutter.cn/ui/animatio…....说白一点就是, 同一个元素在不同页面之间的过渡动画. 场景举两个案例: 从商品的简介, 点击商品之后跳转到商品的详细页面....从外边的文章列表, 点击文章之后, 跳转到从外部用户的头像,点击头像之后, 跳转到用户的个人资料页我们分析一下, 为什么在这种场景, 用hero 比较合适....触发动画导航：通过 Navigator.push 方法将目标路由推送到导航堆栈。动画触发：当目标路由被推送时，Flutter 会自动处理源 Hero 和目标 Hero 之间的动画。...Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), ); 5.

6771 0

Flutter路由详解一、什么是路由二、Flutter路由的详细使用

Flutter给我们提供了一个API,叫做Navigator Navigator 继承自 StatefulWidget，它也是小组件，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能： push...将设置的router信息推送到Navigator上，实现页面跳转。...pushAndRemoveUntil 将给定路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。...pushNamed 将命名路由推送到Navigator。...pushNamedAndRemoveUntil 将命名路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。

4.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Flutter开发（15）- 路由导航

认识Flutter路由路由的概念由来已久，包括网络路由、后端路由，到现在广为流行的前端路由。...无论路由的概念如何应用，它的核心是一个路由映射表比如：名字 detail 映射到 DetailPage 页面等有了这个映射表之后，我们就可以方便的根据名字来完成路由的转发（在前端表现出来的就是页面跳转）在Flutter...基本跳转我们可以通过创建一个新的Route，使用Navigator来导航到一个新的页面，但是如果在应用中很多地方都需要导航到同一个页面（比如在开发中，首页、推荐、分类页都可能会跳到详情页），那么就会存在很多重复的代码...routes：定义名称和路由之间的映射关系，类型为Map 修改MaterialApp中的代码： return MaterialApp( title: 'Flutter...比如下面的abc是不存在有对应的页面的如果没有进行特殊的处理，那么Flutter会报错。

1.2K2 0

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

本文主要包含路由的跳转以及WebView显示文章详情页。效果如下： ? 路由跳转 Flutter通过Navigator类来进行页面路由的管理。...push：指定跳转的widget pushNamed：命名路由，string--->widget pushXXX表示跳转到下一页面，pop表示跳出当前页面，可以携带参数跳转。具体可以参考路由管理。...String, dynamic>; String url = args['url']; String title = args['title']; WebView的使用引入webview_flutter...，在文章详情页通过WebView去加载文章url，不过发现很多文章url都加载出错。...https://pub.dev/packages/webview_flutter

9142 1

Android开发者的Flutter入门（二）

涉及到的有以下这些点：闪屏页自定义布局下拉刷新上拉加载更多使用Assets 路由（页面跳转）内嵌WebView 闪屏页由于启动Flutter app的时候需要初始化Flutter...所以开发Flutter app的时候都需要加一个闪屏页。给Android平台上跑的Flutter app加闪屏页其实是和给一个正常的Android app加闪屏页是一样的。...那段注释的大概意思是说这个标签是用来表示让Flutter在启动过程中保持闪屏页直到第一帧画面被绘制出来。也就是说，闪屏页的隐藏不需要我们来处理了。接下来看看这个LaunchTheme: ?...路由（页面跳转） Android中我们都是用startActivity或者第三方路由库来做页面跳转，在Flutter中，使用内置的Navigator来做跳转的。...Navigator是一个栈，当需要打开新页面的时候就调用Navigator.push，需要返回的时候就调用Navigator.pop，本文中的app当点击新闻项的时候要跳转另外一个页面打开新闻详情。

1.7K2 0

Flutter - 页面间跳转操作

比如数据列表页和详细页。 Android中的页面可以是Activity；iOS中使用ViewController。在Flutter中，页面也是widget。使用Navigator来切换页面。...步骤： 1.创建2个页面 2.用Navigator.push跳去第二个页面 3.用Navigator.pop回到第一个页面 push和pop很容易让人联想到栈。...SecondScreen())); } 3.用Navigator.pop回到第一个界面 Navigator.pop会移除navigator管理的当前的路由（效果是移除当前界面）。...// 第二个页面中 onPressed: () { Navigator.pop(context); } 完整代码 import 'package:flutter/material.dart';...(context); }),),); } } 代码请参阅： https://github.com/RustFisher/flutter_basic

1.4K3 0

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

// 更新当前的索引值 _currentIndex = index; }); }, /// Widget 组件数组 , 设置多个 Widget 组件 /// 同一时间只显示一个页面组件...children: [ HomePage(), // 首页 ImagePage(), // 图片页 SearchPage(), // 搜索页 SettingPage...currentIndex = index; }); }, /// Widget 组件数组 , 设置多个 Widget 组件 /// 同一时间只显示一个页面组件..., // 搜索页 SettingPage(), // 个人设置页 ], ), /// 设置底部导航栏按钮 bottomNavigationBar.../material.dart'; import 'package:flutter_app/navigator/main_navigator.dart'; /// 应用主页面 void main() {

5.9K2 0

Flutter - 使用 push(), pop() 和路由进行导航

在 flutter 应用程序中，我们可以使用 push(), pop() 方法实现导航，或者编写我们自己的路由。...() 方法和 Navigator.pop() 方法进行页面/屏幕导航。...(context, MaterialPageRoute(builder: (context) => SecondScreen())); }, Navigator.push() 方法将给定的路由推送到路由栈中...，这个路由是由 Navigator 类来维护。...在 SecondScreen 的 onPressed(){} 事件中，还是保留使用 Navigator.pop() 方法： onPressed: () { Navigator.pop(context)

1.6K3 0

Flutter Web：刷新与后退问题

但是这里有一个问题，点击返回按钮后，虽然拦截了不会回退到上一页面，但是地址栏中的url变成了首页的url，但是页面还是当前页面，而且点击三次后确实返回了上一页，但是刷新就出问题了。...除了全局变量，其实还影响着flutter的Navigator，我们来看Navigator的push源码： @optionalTypeArgs Futureflutter处理了，浏览器的history没有用到），所以执行pop就会出问题，因为没有上一页了，所以没有执行任何动作，但是当前页面内容清空，变成空白的...对于这个问题很多人也在github的flutter项目中反馈 https://github.com/flutter/flutter/issues/59277 正式的解决方案是使用Navigator2.0...，关于Navigator2.0可以参见Flutter：Navigator2.0介绍及使用这里面我提到，Navigator2.0在浏览器回退按钮的处理上又与Navigator1.0不同，点击回退按钮时Navigator2.0

3.1K3 0

Flutter入门-路由导航

Flutter入门系列连载： Flutter入门-路由导航-本文对应代码链接什么是路由？...bool fullscreenDialog = false, }) builder 用于构建路由页面的具体内容 Settings 包含路由的基本配置信息，如名称，是否为初试路由页(...pop(BuildContext context,[ result ]) 将栈顶路由出栈，result 页面关闭返回给上一个页面的数据 maybePop 判断页面是否可以返回上一页，如果可以直接返回...比如A-B-C，路由栈中存在三个页面，此时处于C,传入C，则替换B页面为指定新路由页；示例路由传值用于在路由跳转时携带一些参数，比如打开某个新闻详情页时，我们需要携带新闻id,这样才能具体知道显示什么...(context).pop("我是返回的数据"); 参考资料 Flutter实战-书籍

1.4K2 0

学一学Flutter新的导航和路由系统

阅读大概需要9分钟本文介绍了flutter中Navigator和RouterAPI是如何工作的。...Navigator 1.0 在 Flutter中，你一定知道Navigator的以下概念： [**Navigator**](https://master-api.flutter.dev/flutter/...可以使用[Navigator.of()](https://api.flutter.dev/flutter/widgets/Navigator/of.html "Navigator.of( "Navigator.of...()")")或使用[Navigator.push()](https://api.flutter.dev/flutter/widgets/Navigator/push.html "Navigator.push...使用setState通知框架调用该build()方法，该方法在_selectedBook为 null时返回一个单页列表。

5.1K4 0

Flutter 中路由返回的多种方式

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

2.6K2 0

Flutter Drawer 抽屉视图与自定义header

drawer中也可以提供一些选项，比如跳转去设置页，跳转去用户资料页面等等。 Flutter提供了Drawer组件；结合ListView等组件，开发者可以快速地制作出抽屉视图。...leading: new CircleAvatar(child: new Icon(Icons.school),), onTap: () { Navigator.pop...UserAccountsDrawerHeader文档请见 https://docs.flutter.io/flutter/material/UserAccountsDrawerHeader-class.html...自定义header Flutter有DrawerHeader，我们对其进行自定义。...同一个UI效果，做法也不止一种。

2K2 0

Flutter中路由返回的多种方式

返回上一级路由 Navigator.of(context).pop(); 在页面中调用这个方法可以返回进入当前页面的上一级页面。 2....替换路由 Navigator.of(context).pushReplacementNamed('目标页面路由'); 当页面中跳转顺序是A页面-B页面-C页面，如果在B页面中使用上面这个命令跳转到C页面...路由跳转实例项目结构： main.dart 主文件代码： // main.dart import 'package:flutter/material.dart'; // 引入路由管理 import...iconSize: 30.0, // 选中图标的颜色 fixedColor: Colors.red, // 多个标签页的动画效果...child: Text("立即登录"), onPressed: () { // 返回上一页

1.5K2 0

第132期：flutter的导航和路由

导航和路由 Flutter提供了一个完整的用于在屏幕之间导航和处理深层链接的系统。...使用Navigator导航 Navigator导航组可以用正确的过渡动画来展示对应的界面，当然，和web端的路由类似，界面其实也是以栈的形式保存着。...当应用平台接收到一个新的深层链接，不论用户此时在哪个位置，Flutter都会将新的路线推送到导航器上。使用命名路由的Flutter应用也不支持浏览器的前进按钮。...使用路由Router 具有高级导航和路由要求的Flutter应用程序（例如使用到每个屏幕的直接链接的web应用程序，或具有多个,或者嵌套导航Navigator组件的应用程序）应使用诸如go_router...同时使用Router和Navigator Router和Navigator在设计时就可以协同工作。

2.7K3 0

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

和尚最近在抽时间学习 Flutter，从零开始，一步一步走的都很艰难，前几天搭了一个基本的【登录】页面，现在学习下一步，页面之间的跳转；今天和尚整理一下 Flutter 测试过程中常用的页面跳转方式...最权威的资料永远是 Flutter 官网，很精华，只可惜和尚英语水平太次，读起来有点吃力。...但和尚了解到，Flutter 中跳转一定要用到 Navigator，就像是 Android 中的 Intent；和尚理解为就是一个栈，进进出出跟 Android 是很类似的，而 Flutter 也很直接...，关键词就是 push 和 pop，和尚分别从这两个关键词来测试 Flutter 页面间的跳转。...(context, '这是 HomePage 页'); }, 2. popAndPushNamed 销毁当前页面并跳转指向新的页面 Navigator.popAndPushNamed 第一个参数为上下文环境

1.3K3 1

Flutter | 路由管理

Navigator 是一个路由管理组件，它提供了打开和退出路由方法 Navigator 通过栈来管理活动路由集合，通常屏幕显示的页面就是栈顶路由打开一个页面 return Navigator.of...关闭一个页面 Navigator.of(context)!....MaterialPageRoute(builder: (context){ String routeName = settings.name; // 如果访问的路由页需要登录...，但当前未登录，则直接返回登录页路由， // 引导用户登录；其它情况则正常打开路由。...} ); } ); ---- 参考资料： Flutter官网 Flutter 实战

1.2K5 0

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

Flutter中文网中有一段话，大多数应用程序包含多个页面。例如，我们可能有一个显示产品的页面，然后，用户可以点击产品，跳到该产品的详情页。...而在Flutter中，页面只是一个widget！在Flutter中，我们那么我们可以使用Navigator在页面之间跳转。...Route 在讲 Route 传参的时候，我们先讲讲 Flutter 中 Route 相关的知识点。...路由( Route )在移动开发中通常指页面（ Page ），这跟 web 开发中单页应用的 Route 概念意义是相同的，Route 在Android 中通常指一个 Activity ，在 iOS 中指一个...源码分析传送门：Flutter路由管理和页面参数的传递（源码分析）

5.4K4 0

flutter仿BOSS直聘（二），大前端技术实现

项目简介记得上一篇的写作时间还在2018年2月份，已经很久没更新了，而flutter的版本更新了好几次，自flutter 1.0正式版推出之后，一直有打算把之前的项目重写一下，因为flutter本身更新了许多新特性...先把开源地址提供给大家： github地址：服务端版本：flutter仿boss直聘服务端. flutter版本：flutter仿boss直聘. 项目效果图： ?...Row, Column, Flex, ListView, CustomListView, Wrap, Padding, Center, Future, FutureBuilder, Expanded, Navigator...Navigator.of(context).pushAndRemoveUntil( PageRouteBuilder( pageBuilder: (BuildContext...需要当前页和目标页一一对应起来。

2.1K2 0

Flutter | 路由管理

Navigator 是一个路由管理组件，它提供了打开和退出路由方法 Navigator 通过栈来管理活动路由集合，通常屏幕显示的页面就是栈顶路由打开一个页面 static Future<T?...result ]) { Navigator.of(context)!....MaterialPageRoute(builder: (context){ String routeName = settings.name; // 如果访问的路由页需要登录...，但当前未登录，则直接返回登录页路由， // 引导用户登录；其它情况则正常打开路由。...} ); } ); 复制代码参考资料： Flutter官网 Flutter 实战

1K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭