Flutter 命名路由 终于爬出坑了

最近在学习命名路由说真的我被坑到了。所以特此写篇文章总结最近遇到的坑，希望可以帮助像我一样刚刚开始学习flutter的小白。

以下是最近两天研究命名路由遇到的坑（死去活来）👇
1.命名路由的routes对象应该配置在哪？
2.onGenerateRoute方法和时才能生效？
3.routes里面的路由如何配置入参？
4.页面的构造方法应该如何写？

一、命名路由的routers应该注册还是外放？

相信有不少人跟我一样刚开始是这样配置的 不要这样配置

如果您的routes注册（与上图相同）在MaterialApp中那么恭喜您，您已经成功入坑啦。

《Flutter 实战》中作者提到了onGenerateRoute的正确用法。如下图👇

意思是如果您的路由在MaterialApp中的routes: 中注册那么onGenerateRoute是不会被调用的。routes正确的配置不能在MaterialApp中。核心代码如下👇

class MyApp extends StatelessWidget {
  final routes = {
    "/one": (context, {arguments}) => OnePage(arguments: arguments),// 有参
    "/two": (context) => TwoPage(),//无参数
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (RouteSettings settings) {
        String? name = settings.name;
        print("name==$name");
        .......
      },
    );
  }
}

二、routes中的参数如何配置。

  // 正确方式
  final routes = {
    "/one": (context, {arguments}) => OnePage(arguments: arguments),
    ....
  };

  // 错误方式
  final routes = {
    "/one": (context, arguments) => OnePage(arguments: arguments),
    ....
  };

(context, {arguments}) => XxxPage(arguments: arguments),

1.(context, {arguments})必须这么写，就算路由不需要传参也要这么写。不然会包如下错误。

三、页面中的构造函数如何写。

首页先页面的参数应该是个可选命名参数，因为1.有时候你需要传参有时候你不需要传参。2.统一你的参数是什么字段便于在onGenerateRoute封装使用.因为您这个传递的参数最终是要在onGenerateRoute方法中传递出去的，您不可能为不同的路由配置很多个不一样的入参字段，所以您需要统一入参字段（arguments）。

何为可选命名参数

// 如下方法
String personFun(String name, {int age}){
  return "姓名$name 年龄$age"；
}
//用法1.
personFun("张三",age: 13); // age 必须以键值对的形式传入。
//用法2.
personFun("张三"); // age不传也没关系。

页面核心代码如下👇

import 'package:flutter/material.dart';

class OnePage extends StatelessWidget {
  var arguments;
  OnePage({Key? key, this.arguments}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("==-=无状态-=-=-=$arguments");
    return Scaffold(
      appBar: AppBar(
        title: Text("无状态组件"),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Text(this.arguments == null ? "参数为空" : arguments['key']),
      ),
    );
  }
}

项目地址