最近在学习命名路由说真的我被坑到了。所以特此写篇文章总结最近遇到的坑,希望可以帮助像我一样刚刚开始学习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']),
),
);
}
}