所有内容首发微信公众号【WEB前端李志杰】，欢迎关注、点赞并转发！
Flutter中的默认导航分成两种，一种是命名的路由，一种是构建路由。
一、命名路由传参
应用入口处定义路由表
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 隐藏预览中的debugtitle: 'Flutter Demo',routes: {'/': (context) => const HomePage(),"menu": (context) => const MenuPage()},);}}
// 定义HomePageclass HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("登录"),),body: ElevatedButton(onPressed: () async {// 实现路由跳转var result = await Navigator.pushNamed(context, 'menu',arguments: {'name': 'title'});print(result);},child: const Text('登录'),),);}}
// 定义MenuPageclass MenuPage extends StatelessWidget {const MenuPage({Key? key}) : super(key: key);@override// 接收传参Widget build(BuildContext context) {dynamic argumentsData = ModalRoute.of(context)?.settings.arguments;return Scaffold(appBar: AppBar(title: Text('菜单' + argumentsData.toString()),),body: ElevatedButton(onPressed: () {Navigator.pop(context, {'name': "Navigator.pop传参"});},child: const Text("返回"),),);}}
二、构建路由传参
从HomePage页面跳转MenuPage页面时，携带参数
第一种方式：
// 定义HomePageclass HomePage extends StatelessWidget {const HomePage ({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("登录"),),body: ElevatedButton(onPressed: () {// 实现路由跳转Navigator.push(context,MaterialPageRoute(builder: (context) => const MenuPage(title: '菜单123',), // 需要跳转的页面), // 修改路由的名称、信息等);},child: const Text('登录'),),);}}
// 定义MenuPageclass MenuPage extends StatelessWidget {// 定义接收的字段final String title;const MenuPage({Key? key, required this.title}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(title),),body: ElevatedButton(onPressed: () {Navigator.pop(context);},child: const Text("返回"),),);}}
第二种方式：
// 定义HomePageclass HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("登录"),),body: ElevatedButton(onPressed: () {// 实现路由跳转Navigator.push(context,MaterialPageRoute(builder: (context) => const MenuPage(),// 修改路由的名称、信息等settings: const RouteSettings(name: '菜单', arguments: {"name": '123'}) // 需要跳转的页面),);},child: const Text('登录'),),);}}
// 定义MenuPageclass MenuPage extends StatelessWidget {const MenuPage({Key? key}) : super(key: key);@override// 接收传参Widget build(BuildContext context) {dynamic argumentsData = ModalRoute.of(context)?.settings.arguments;return Scaffold(appBar: AppBar(title: Text('菜单' + argumentsData.toString()),),body: ElevatedButton(onPressed: () {Navigator.pop(context);},child: const Text("返回"),),);}}
从MenuPage页面返回HomePage页面时，携带参数
// 定义HomePageclass HomePage extends StatelessWidget {const HomePage ({Key? key}) : super(key: key);;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("登录"),),body: ElevatedButton(onPressed: () async {// 实现路由跳转var result = await Navigator.push(context,MaterialPageRoute(builder: (context) => const MenuPage(),),);print(result);},child: const Text('登录'),),);}}
// 定义MenuPageclass MenuPage extends StatelessWidget {const MenuPage({Key? key}) : super(key: key);@override// 接收传参Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('菜单'),),body: ElevatedButton(onPressed: () {Navigator.pop(context, {'name': "Navigator.pop传参"});},child: const Text("返回"),),);}}
往期内容：
【Vue】在Vite+Vue3.0中使用jsx语法开发。
【Vite+vue3】vue3当中keep-alive的使用
【微信公众号开发系列文章】一、微信公众号开发环境搭建
【微信公众号开发系列文章】二、Access token相关操作
