『Flutter』跨页面传参
原创
1.前言
经过上一章节的介绍，给大家详细介绍了命名路由相关的知识，本章节将给大家介绍如何在跨页面传参。
2.跨页面传参
2.1.简介
Flutter 的页面传参通常涉及到两个核心概念：路由（Routes）和导航（Navigation）。在 Flutter 中，你可以通过构造函数传递参数给新页面，或者使用路由的参数。
2.2.常用传参方式
- 构造函数参数传递：
- 创建一个新页面时，可以通过其构造函数传递数据。
- 这是最直接的方法，适用于简单的场景。
- 使用
Navigator类：Navigator.push方法用于跳转到新页面，可以携带参数。Navigator.pop方法用于返回到上一个页面，可以返回数据。
- 路由参数：
- 可以在定义路由时设置参数。
- 使用
ModalRoute.of(context).settings.arguments来接收参数。
3.通过构造函数传递参数
页面 A：跳转并传递参数:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
initialRoute: '/',
routes: {
'/': (context) => FirstScreen(),
'/second': (context) => PageB(
key: UniqueKey(),
data: "Hello Flutter",
)
},
);
}
}页面 B：接收参数：
class PageB extends StatelessWidget {
final String data;
PageB({required Key key, required this.data}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page B'),
),
body: Center(
child: Text(data),
),
);
}
}最终代码:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
initialRoute: '/',
routes: {
'/': (context) => const FirstScreen(),
'/second': (context) => PageB(
key: UniqueKey(),
data: "Hello Flutter",
)
},
);
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('First Screen')),
body: Center(
child: ElevatedButton(
child: const Text('Navigate to second screen'),
onPressed: () {
// Navigator.pushNamed(context, '/second');
Navigator.pushNamed(context, '/second', arguments: 'Hello Flutter');
},
),
),
);
}
}
class PageB extends StatelessWidget {
final String data;
const PageB({required Key key, required this.data}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page B'),
),
body: Center(
child: Text(data),
),
);
}
}运行效果：
4.使用路由参数
定义路由并传递参数：
return MaterialApp(
title: 'Flutter Demo',
initialRoute: '/',
routes: {
'/': (context) => const FirstScreen(),
'/pageB': (context) => const PageB(),
},
);跳转并传递参数：
onPressed: () {
Navigator.pushNamed(
context,
'/pageB',
arguments: 'Hello BNTang',
);
},页面 B：接收参数：
class PageB extends StatelessWidget {
const PageB({super.key});
@override
Widget build(BuildContext context) {
final Object? data = ModalRoute.of(context)?.settings.arguments;
return Scaffold(
appBar: AppBar(
title: const Text('Page B'),
),
body: Center(
child: Text(data as String),
),
);
}
}最终代码：
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
initialRoute: '/',
routes: {
'/': (context) => const FirstScreen(),
'/pageB': (context) => const PageB(),
},
);
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('First Screen')),
body: Center(
child: ElevatedButton(
child: const Text('Navigate to second screen'),
onPressed: () {
Navigator.pushNamed(
context,
'/pageB',
arguments: 'Hello BNTang',
);
},
),
),
);
}
}
class PageB extends StatelessWidget {
const PageB({super.key});
@override
Widget build(BuildContext context) {
final Object? data = ModalRoute.of(context)?.settings.arguments;
return Scaffold(
appBar: AppBar(
title: const Text('Page B'),
),
body: Center(
child: Text(data as String),
),
);
}
}运行效果：
5.参考资料
- https://docs.flutter.dev/
- https://docs.flutter.dev/cookbook/navigation/navigation-basics
- https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments
End
- 🐤如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流。
- 🐰您的每一条评论对我都至关重要，我会尽快给予回复。
- 🎈如果您觉得这篇文章对您有所启发或帮助，请不吝赞赏、收藏或分享。
- 🎁您的每一个动作都是对我创作的最大鼓励和支持。
- 👍谢谢您的阅读和陪伴！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录