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

flutter入坑,navigator页面跳转并传递参数_第1张图片

页面跳转的时候,总要涉及到参数的传递,不管是列表页面跳转到详情页面,还是跳转到编辑页面。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),
      ),
    );
  }
}

 

你可能感兴趣的:(flutter入坑)