前置：参照【Flutter路由参数1 - 路由管理】中配置命名路由routes、onGenerateRoute。

1 前言

• Flutter路由时传递参数一般可以使用以下两种方式：

• Flutter页面后退时，直接在pop中携带结果，原页面直接获取结果。

2 构造方法传参

2.1 参数传递

Navigator.push(context, MaterialPageRoute(
  builder: (context) {
    return TestRouterConstructPage({"page-title": "test-router"});
  },
));

2.2 参数获取

late Map _argu;
TestRouterConstructPage(this._argu, {Key? key}) : super(key: key);

2.3 完整测试代码

TestHomePage类：

class TestHomePage extends StatelessWidget {
  static const String routeName = "/test-home";
  const TestHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: const Size(375, 667));
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.red)),
            child: const Text("This is a home page. This is a home page. This is a home page.",
                textAlign: TextAlign.center, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.red)),
          ),
        ),
        onTap: () {         
          Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return TestRouterConstructPage({"page-title": "test-router"});
            },
          ));
        },
      ),
    );
  }
}

TestRouterConstructPage类：

class TestRouterConstructPage extends StatelessWidget {
  late Map _argu;
  TestRouterConstructPage(this._argu, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.blue)),
          child: Text("This is a router construct page. argMap = $_argu",
              textAlign: TextAlign.center, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.blue)),
        ),
      ),
    );
  }
}

3 arguments传参

3.1 参数传递

Navigator.pushNamed(context, TestRouterPage.routeName, arguments: {"page-title": "test-router"});

3.2 参数获取

Object? argMap = ModalRoute.of(context)?.settings.arguments;

3.3 完整测试代码

TestHomePage类：

class TestHomePage extends StatelessWidget {
  const TestHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: const Size(375, 667));
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.red)),
            child: const Text("This is a home page. This is a home page. This is a home page.",
                textAlign: TextAlign.center, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.red)),
          ),
        ),
        onTap: () {
          Navigator.pushNamed(context, TestRouterPage.routeName, arguments: {"page-title": "test-router"});
        },
      ),
    );
  }
}

TestRouterPage类：

class TestRouterPage extends StatelessWidget {
  static const String routeName = "/router";
  const TestRouterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Object? argMap = ModalRoute.of(context)?.settings.arguments;
    Map argu = new Map();
    if (argMap != null && (argMap as Map).isNotEmpty) {
      argu = argMap;
    }

    return Scaffold(
      body: Center(
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.blue)),
          child: Text("This is a router page. argMap = ${argu}",
              textAlign: TextAlign.center, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.blue)),
        ),
      ),
    );
  }
}

4 后退返回结果

3.1 参数传递

Navigator.pop(context, "pop success.");

3.2 参数获取

Future future = Navigator.push(context, MaterialPageRoute(
  builder: (context) {
    return TestRouterConstructPage(const {"page-title": "test-router"});
  },
));
future.then((value) => print("return: $value"));

3.3 完整测试代码

TestRouterConstructPage类：

class TestRouterConstructPage extends StatelessWidget {
  late Map _argu;
  TestRouterConstructPage(this._argu, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
            child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.blue)),
          child: Text(
            "This is a router construct page. argMap = $_argu",
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.blue),
          ),
        )),
        onTap: () {
          Navigator.pop(context, "pop success.");
        },
      ),
    );
  }
}

TestHomePage类：

class TestHomePage extends StatelessWidget {
  static const String routeName = "/test-home";
  const TestHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: const Size(375, 667));
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.red)),
            child: const Text("This is a home page. This is a home page. This is a home page.",
                textAlign: TextAlign.center, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.red)),
          ),
        ),
        onTap: () {
          // Navigator.pushNamed(context, TestRouterPage.routeName, arguments: {"page-title": "test-router"});
          Future future = Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return TestRouterConstructPage(const {"page-title": "test-router"});
            },
          ));
          future.then((value) => print("return: $value"));
        },
      ),
    );
  }
}