Flutter Navigator路由传参的实现
时间：2022-12-20 10:12:09|栏目：Android代码|点击： 次
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("返回"),
),
);
}
}
