admin管理员组文章数量:1633929
所有内容首发微信公众号【WEB前端李志杰】,欢迎关注、点赞并转发!
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("返回"),
),
);
}
}
往期内容:
【Vue】在Vite+Vue3.0中使用jsx语法开发。
【Vite+vue3】vue3当中keep-alive的使用
【微信公众号开发系列文章】一、微信公众号开发环境搭建
【微信公众号开发系列文章】二、Access token相关操作
版权声明:本文标题:Flutter Navigator路由传参 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729176055a1188730.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论