Flutter 路由跳转和传值

于 2020-10-12 13:04:08 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010184528/article/details/108599622
版权

目录

路由跳转的两种方式

方式一：push跳转

方式二：routes命名路由跳转

页面返回

传值

通过构造函数传值（不够灵活）

通过Todos列表

接收返回数据

async+await异步方式

 Future方式

push路由跳转失效的原因？

首先新建两个路由

路由跳转的两种方式

方式一：push跳转

Navigator.push(context, MaterialPageRoute(builder: (context) { return SecondApp();}));

或者

Navigator.push(context, MaterialPageRoute(builder: (context) => SecondApp();));

或者

Navigator.of(context).push(MaterialPageRoute(builder: (context)=>SecondApp()));

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return First();
  }
}

class First extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: buildScaffold,
      ),
    );
  }
}

Widget buildScaffold(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title:
            Text("第一个页面", style: TextStyle(fontSize: 18, color: Colors.white)),
      ),
      body: RaisedButton(
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return SecondApp();
            }));
          },
          color: Colors.blue,
          child: Text(
            "跳转到下一个页面",
            style: TextStyle(fontSize: 25, color: Colors.white),
          )));
}

运行： 

方式二：routes命名路由跳转

  • 关于routes的声明，是要依附在MaterialApp中

routes: {
  "/page_two": (context) => SecondApp(),
} 

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FirstApp();
  }
}

class FirstApp extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "page_two":(context)=>SecondApp()
      },
      home: Builder(
        builder: buildScaffold,
      ),
    );
  }
}

Widget buildScaffold(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title:
            Text("第一个页面", style: TextStyle(fontSize: 18, color: Colors.white)),
      ),
      body: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, "page_two");

          },
          color: Colors.blue,
          child: Text(
            "跳转到下一个页面",
            style: TextStyle(fontSize: 25, color: Colors.white),
          )));
}

运行： 

页面返回

直接在按钮监听处添加        Navigator.pop(context);

查看源码，会发现，这里有可选参数result，这里可以处理返回值，下面会讲到

传值

通过构造函数传值（不够灵活）

  • 这里只是举了一个简单的例子，传递String类型，当然也可以定义传递对象，传递数组，道理是一样的

        routes: { "page_two":(context)=>SecondApp(content:"你好") }

class SecondApp extends StatefulWidget {
  String content;
  SecondApp({this.content});
  @override
  State<StatefulWidget> createState() {
    return Second();
  }
}
class Second extends State<SecondApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text("第二个页面",
                style: TextStyle(fontSize: 18, color: Colors.white)),
          ),
          body: RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              color: Colors.blue,
              child: Text(
                widget.content+"  点我返回",
                style: TextStyle(fontSize: 25, color: Colors.white),
              ))),
    );
  }
}

运行：

通过Todos列表

首先先建一个Todos实体类

class Todo {
  String title;
  Todo(this.title);
}

传值：

Navigator.pushNamed(context, "page_two",arguments: Todo("你好"));

或者：

Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondApp(), settings: RouteSettings(arguments: Todo("你好"))));

 接收：

void main() => runApp(MainApp());
class MainApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return First();
  }
}
class First extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text("第一个页面",
                style: TextStyle(fontSize: 18, color: Colors.white)),
          ),
          body: RaisedButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return SecondApp();
                }));
              },
              color: Colors.blue,
              child: Text(
                "跳转到下一个页面",
                style: TextStyle(fontSize: 25, color: Colors.white),
              )
          )
      ),
    );
  }
}

接收返回数据

async+await异步方式

接收返回的数据肯定是个耗时操作，所以必须要是异步的

  void _reset(BuildContext context) async{
    final result=await Navigator.pushNamed(context, "page_two", arguments: Todo("你好"));
    setState(() {
      str=result as String;
    });
  } 

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FirstApp();
  }
}

class FirstApp extends State<MainApp> {
  String str = "跳转到下一个页面";

  void _reset(BuildContext context) async{
    final result=await Navigator.pushNamed(context, "page_two", arguments: Todo("你好"));
    setState(() {
      str=result as String;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {"page_two": (context) => SecondApp()},
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text("第一个页面",
                style: TextStyle(fontSize: 18, color: Colors.white)),
          ),
          body: Builder(builder: (context) {
            return RaisedButton(
                onPressed: () {
                  _reset(context);
                },
                color: Colors.blue,
                child: Text(
                  str,
                  style: TextStyle(fontSize: 25, color: Colors.white),
                ));
          })),
    );
  }
}

 Future方式

Future对象表示异步操作的结果，我们通常通过then（）回调来处理返回的结果

Future future = Navigator.pushNamed(context, "page_two", arguments: Todo("你好"));

future.then((value) { _reset(value); });

class MainApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FirstApp();
  }
}

class FirstApp extends State<MainApp> {
  String str = "跳转到下一个页面";

  void _reset(String data) {
    setState(() {
      str = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {"page_two": (context) => SecondApp()},
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text("第一个页面",
                style: TextStyle(fontSize: 18, color: Colors.white)),
          ),
          body: Builder(builder: (context) {
            return RaisedButton(
                onPressed: () {
                  Future future = Navigator.pushNamed(context, "page_two",
                      arguments: Todo("你好"));
                  future.then((value) {
                    _reset(value);
                  });
                },
                color: Colors.blue,
                child: Text(
                  str,
                  style: TextStyle(fontSize: 25, color: Colors.white),
                ));
          })),
    );
  }
}

运行：

push路由跳转失效的原因？

Flutter在一些包的层级比较多子Widget里无法直接用过Navigator.of(context).push方法来进行跳转，主要是因为子Widget的Context无法执行跳转操作，只能使用页面的BuildContext来进行跳转

所以在上面的案例中，都会在最外层包裹一层Builder

 

 

 

 

 

 

 

 

 

 

小小苏的小小苏
关注
专栏目录
Flutter 命名路由及传值
H.A.N的博客
08-13 1940
命名路由是区别于基本路由的一种存在，方便于大型项目中路由的统一管理，现在，在前面基本路由的项目基础上实现实现命名路由。 使用步骤 路由配置   命名路由在使用前，需要在根组件main.dart中进行简单的配置（前面是页面路径，后面是页面中的组件名称）： main.dart 主要代码： import 'package:flutter/material.dart'; import 'page...
Flutter 命名路由传值(无状态)
01-20
// 路由跳转并传值 Navigator.pushNamed(context, '/search'); }, ), ``` 如果需要传递数据，例如在跳转到`FormPage`时，我们可以这样做： ```dart onPressed: () { // 路由跳转并传值 Map, dynamic> data = ...
Flutter路由与导航示例，包含页面跳转和传值传参，接收页面返回数据等功能
04-09
Flutter路由与导航示例，包含页面跳转和传值传参，接收页面返回数据等功能。详情请看博客：https://yuzhiqiang.blog.csdn.net/article/details/89090742
Flutter基本路由及跳转传值
qq_42572245的博客
06-10 307
Home.dart import 'package:flutter/material.dart'; import 'package:untitled1/Pages/SearchPage.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Column( children...
Flutter 页面跳转及传值
caorya的博客
06-19 3563
本文实现了页面跳转，在跳转过程中传值给下一个页面并返回到之前页面。 文中使用了三个文件，包括两个页面和一个数据文件。 数据文件listData.dart List listData=[ { "patrol_plan_name": 'TSD-8351', "address": '郑州大学与文化路交叉口向南100米', "remainder_days": '5天' ...
Flutter普通路由跳转页面及传值
Gemini_Kanon的博客
12-25 482
最近由于公司业务要求在学Flutter&Dart开发APP，开始想学webview开发Android但是还需要开发ios版本的于是找到了这项新技术，正好这两天学到路由器这部分，感觉需要记录一下，其他的以后陆续更（包括环境搭建，项目创建等） 首先看一下目录结构这里我只截了需要的几个页面部分 首先是main.dart，这个是项目的入口文件，相当于初始化文件 import 'packag...
flutter -------- 页面跳转和传值
切切歆语的博客
05-06 787
在安卓原生开发中，页面跳转可以用Intent类来具体实现： Intent intent =new Intent(MainActivity.this,second.class); startActivity(intent); 页面的传值也有很多种 Flutter的传值方式是路由传值； 例如，我们想传一些关于我们点击的ListView条目的信息。 效果图 代码： ...
flutter路由跳转和传值方式demo
最新发布
10-11
内容概要：这里写了一个demo,描述了Flutter开发过程中路由跳转的传值方式，记录下，希望能够帮到那些准备使用Flutter开发软件的开发者。 适合人群：准备刚入行的新手小白或者有经验的大神做个备份
Flutter路由与导航示例，页面跳转和传值传参，接收页面返回数据
04-15
Flutter路由与导航示例，包含页面跳转和传值传参，接收页面返回数据等功能。详情请看博客：https://yuzhiqiang.blog.csdn.net/article/details/89090742
Flutter路由的跳转、动画和传参详解（最简单）
01-05
路由 做Android/iOS原生开发的时候，要打开一个新的页面，你得知道你的目标页面对象，然后初始化一个Intent或者ViewController，再通过startActivity或者pushViewController来推出一个新的页面，不能跟web一样，直接丢一个链接地址就跳转到新的页面。当然，可以自己去加一个中间层来实现这些功能。 Flutter里面是原生支持路由的。Flutter的framework提供了路由跳转的实现。我们可以直接使用这些功能。 Flutter路由介绍 Flutter里面有路由支持所有的路由场景，push、pop页面，页面间的参数传递等等。flutter里
Flutter 页面返回传值
10-11
Flutter 页面返回传值需要注意的几点如下： 1、跳转页面时要使用async关键字修饰方法体    声明内部代码需要延迟执行 skipPage(BuildContext context) async { } 2、跳转动作要使用await关键字修饰（Dart规定有async标记的函数，只能由await来调用） 声明延迟执行后赋值 final result = await Navigator.push(context,MaterialPageRoute(builder: (context) => PageA())); 3、返回页面时传值 Navigator.pop(context, '我是返回数据');
Flutter学习之旅(六)----ListView控件自定义Adapter以及带参数跳转
07-30
Flutter学习之旅(六)----ListView控件自定义Adapter以及带参数跳转，博客对应地址：http://blog.csdn.net/zhangxiangliang2/article/details/76383244
Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据
01-07
//导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件 //使用MaterialApp和Scaffold 两个组件装饰App //MaterialApp一般作为根组件----home、title、color、theme、routes等 class MyApp ext
Flutter开发之路由跳转与传参（七）
沐雨07的专栏
06-18 1712
参考练习:https://book.flutterchina.club/chapter2/flutter_router.html 路由(Route)在移动开发中通常指页面（Page），这跟web开发中单页应用的Route概念意义是相同的，Route在Android中通常指一个Activity，在iOS中指一个ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管...
Flutter 跳转页面并传值
yechaoa
05-13 7549
文章目录1、跳转2、传值3、接收 跳转传值是再普通不过的小功能了，在开发中会经常用到，比如列表进入详情。 效果： 1、跳转 比如在onTap事件中处理跳转。 为了导航到新的页面，我们需要调用Navigator.push方法。 该push方法将添加Route到由导航器管理的路由栈中！ 该push方法需要一个Route，但Route从哪里来？我们可以创建自己的，或直接使用MaterialPa...
Flutter 页面之间传值— —push (以及返回值,类似与Android里面的OnActivityForResult)
油焖茄子 的博客
02-28 2788
先上代码： import 'package:flutter/material.dart'; void main() =&gt; runApp(new MaterialApp( title: "ArticlePage", home: new ArticleListScreen(), )); class ArticleListScreen extends St...
跳转界面传递数据
狂奔的奶牛
12-27 494
效果图：   activity_main: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
Flutter：剥离StatefulWidget——简化页面开发、跳转以及传值
ljq5945的博客
09-13 1104
伊始 前几日一位大佬考我，说： flutter页面开发需要写StatefulWidget和State，Android只需要Activity， 如何简化这种开发方式？ 我答曰： activity还需要写xml呢~ 在大佬的静默中,四周浮现起热烈的掌声… … 深夜，天桥下的我辗转反侧、难以入眠… ‘ 难道，真的可以？ ’… 经过反复推敲打磨后，这个‘轮子’还确实有点儿圆，‘滚’起来还挺顺溜。 天桥之下难免简陋，如有不足还请海涵，万望指点~ 嘿嘿 构思 我们一般开发页面A，结构如下: class A ex
Flutter传递数据(Navigator.push)
Me_Ordinary的专栏
04-24 7280
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; class Todo { final String title; final String description; Todo(this.title, this.description); } void main()...
Flutter 路由传值教程：从基础到实践
"本文档主要介绍在Flutter中如何进行基础的路由传值操作，包括无参数跳转和带参数跳转的方法。" 在Flutter开发中，路由管理是构建应用的重要组成部分，它允许我们从一个页面导航到另一个页面。本示例将通过两个具体...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小苏的小小苏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值