Flutter Navigator路由传参的实现
作者：WEB前端李志杰
本文主要介绍了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("返回"),
),
);
}
}
到此这篇关于Flutter Navigator路由传参的实现的文章就介绍到这了,更多相关Flutter Navigator路由传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！