经过上一章节的介绍,给大家详细介绍了命名路由相关的知识,本章节将给大家介绍如何在跨页面传参。
Flutter 的页面传参通常涉及到两个核心概念:路由(Routes)和导航(Navigation)。在 Flutter 中,你可以通过构造函数传递参数给新页面,或者使用路由的参数。
Navigator
类:Navigator.push
方法用于跳转到新页面,可以携带参数。Navigator.pop
方法用于返回到上一个页面,可以返回数据。ModalRoute.of(context).settings.arguments
来接收参数。页面 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),
),
);
}
}
运行效果:
定义路由并传递参数:
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),
),
);
}
}
运行效果:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。