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

灰太狼 2023-03-13 06:48 15阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: /images/20230312/d263ba48d37d4634aff18a8bad86c369.png