flutter入坑,navigator页面跳转并传递参数

页面跳转的时候,总要涉及到参数的传递,不管是列表页面跳转到详情页面,还是跳转到编辑页面。flutter里使用Navigator部件该如何传递参数,并且获取页面关闭时的返回值呢?代码中使用了构造函数参数传递页面跳转参数。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // 主方法
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Builder(
      builder: (context) {
        return Scaffold(
          appBar: AppBar(title: Text('Navigator跳转页面')),
          body: Center(
            child: GestureDetector(
              onTap: () {
                var nav = Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext ctx) {
                  var param = {'a': 10};

                  // 页面跳转时传入参数
                  return FirstPage(param: param);
                }));

                // 在Navigator的异步函数中获取返回值
                nav.then((val) => {print(val)});
              },
              child: Text('Hello World!', textDirection: TextDirection.ltr),
            ),
          ),
        );
      },
    ));
  }
}

/**
 * 跳转页面
 */
class FirstPage extends StatelessWidget {
  var param;

  // 构造函数获取传递的参数
  FirstPage({Map param}) {
    print(param['a']);
    this.param = param;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: GestureDetector(
        onTap: () {
          // pop返回值
          Navigator.pop(context, 'pop返回值');
        },
        child: Text('我是第二个页面', textDirection: TextDirection.ltr),
      ),
    );
  }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值