Flutter Navigator路由传参的实现

Flutter中的默认导航分成两种，一种是命名的路由，一种是构建路由。

一、命名路由传参

应用入口处定义路由表

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false, // 隐藏预览中的debug
     title: 'Flutter Demo',
     routes: {
       '/': (context) => const HomePage(),
       "menu": (context) => const MenuPage()
     },
   );
 }
}

// 定义HomePage
class HomePage extends StatelessWidget {
 const HomePage({Key? key}) : super(key: key);
 @override
 Widget 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('登录'),
     ),
   );
 }
}

// 定义MenuPage
class 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页面时，携带参数

第一种方式：

// 定义HomePage
class HomePage extends StatelessWidget {
 const HomePage ({Key? key}) : super(key: key);
 @override
 Widget 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('登录'),
     ),
   );
 }
}

// 定义MenuPage
class MenuPage extends StatelessWidget {
 // 定义接收的字段
 final String title;
 const MenuPage({Key? key, required this.title}) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(title),
     ),
     body: ElevatedButton(
       onPressed: () {
         Navigator.pop(context);
       },
       child: const Text("返回"),
     ),
   );
 }
}

第二种方式：

// 定义HomePage
class HomePage extends StatelessWidget {
 const HomePage({Key? key}) : super(key: key);
 @override
 Widget 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('登录'),
     ),
   );
 }
}

// 定义MenuPage
class 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页面时，携带参数

// 定义HomePage
class HomePage extends StatelessWidget {
 const HomePage ({Key? key}) : super(key: key);;
 @override
 Widget 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('登录'),
     ),
   );
 }
}

// 定义MenuPage
class 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("返回"),
     ),
   );
 }
}

来源：https://blog.csdn.net/qq_16221009/article/details/123347768