Flutter 页面跳转

目录

一、基本路由(静态路由)

1、不传值跳转

2、传值跳转

二、命名路由(动态路由)

1、不传值跳转

2、传值跳转

效果图

完整代码


 

在Flutter中页面跳转被称之为‘路由’。
是通过Navigator 组件管理路由导航,其提供了管理堆栈的方法:Navigator.push(跳转) 和 Navigator.pop(返回)。
Flutter配置路由的方式有两种:1、基本路由(静态路由) 2、命名路由(动态路由)。

一、基本路由(静态路由)

1、不传值跳转

不传值跳转页面,可以认为是 只有一个动作即:跳转

//路由跳转  固定写法  PageA 为目标页面类名
Navigator.of(context).push(MaterialPageRoute(builder: (context) => PageA()));

2、传值跳转

传值跳转页面,可以认为是 有三个动作即:传值,跳转,目标页面接收

传值与跳转 

//路由跳转  并 传值    固定写法  PageB 为目标页面类名  传值
Navigator.of(context).push(MaterialPageRoute(builder: (context) => PageB(para: '你好',)));

 目标页面接收

//目标页面PageB,重写带参构造接收数据

//定义变量
var para;
//重写构造  接收数据
PageB({this.para = '没有接收到数据'});  

二、命名路由(动态路由)

1、不传值跳转

在MaterialApp根目录中配置路由

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 页面跳转'),),
        body: MyBody()
      ),
      //配置路由  -- map格式
      routes: {
        '/pageC':(context) => PageC(),
        '/pageD':(context) => PageD(),
      },
    );
//路由跳转   /pageC为  配置路由中的Key
 Navigator.pushNamed(context, '/pageC');

2、传值跳转

命名路由传值跳转要麻烦一些,总结四步:配置路由页面参数、配置路由监听、传值、目标页面接收

配置路由页面参数 

  //配置路由页面参数
  final routes = {
        '/pageC':(context) => PageC(),
        '/pageD':(context,{arguments})=>PageD(arguments:arguments),
      };

在MaterialApp根目录中配置路由监听

//配置路由监听
      onGenerateRoute: (RouteSettings settings) {
        // 统一处理
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context,
                    arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context));
            return route;
          }
        }
      },

传值跳转页面

//路由跳转   传递id  等于123456
Navigator.pushNamed(context, '/pageD',arguments:{"id":123456});

 目标页面接收

//目标页面PageD,重写带参构造接收数据  

//定义变量
  final arguments;
  //重写构造  接收数据
  PageD({this.arguments});

返回操作比较简单,固定写法

Navigator.pop(context);

 

效果图

           

完整代码

 查看完整代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

马志武

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

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

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

打赏作者

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

抵扣说明:

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

余额充值