目录Flutter 的路由导航 默认路由 页面跳转并传递参数 总结 Flutter 的路由导航 路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理
路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理页面之间的跳转。在原生的Android 开发,是通过startActivity或startActivityForResult 来完成页面的跳转的,在Flutter 中如何实现呢?
在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的:
在Flutter 中根据是否提前注册,可以分为 基本路由和 命名路由。
基本路由:没有提前注册。
命名路由:需要在 APP 的入口进行注册。
基本路由使用方式相对简单灵活,适用于应用中页面不多的场景。而在应用中页面比较多的情况下,再使用基本路由方式,那么每次跳转到一个新的页面,我们都要手动创建 MaterialPageRoute 实例,初始化页面,然后调用 push 方法打开它,还是比较麻烦的。
应用程序 MaterialApp 提供一个页面名称映射规则,即路由表 routes,路由表实际上是一个 Map,其中 key 值对应页面名字,而 value 值则是一个 WidgetBuilder 回调函数,我们需要在这个函数中创建对应的页面。而一旦在路由表中定义好了页面名字,我们就可以使用 Navigator.pushNamed 来打开页面了。
需要注意的是,要在 进入APP入口的 MaterialApp 注册路由才有用。
使用基本路由方式打开 Page1:
Navigator.push(
context, MaterialPageRoute(builder: (context) => Page1())),
命名路由:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
routes: {
// 注册路由
"route_Page1": (context) => Page1(),
...
},
onUnknownRoute: (RouteSettings setting) =>
MaterialPageRoute(builder: (context) => ErrorPage()),
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatfORMDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
// 使用命名路由方式打开 Page1:
Navigator.pushNamed(context, "route_Page1"),
使用命名路由,该命名不在路由表中就会报错,这时候可以通过设置默认路由,当找不到的时候,进到到一个指定的页面。只需要在 MaterialApp 中配置:onUnknownRoute 即可
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
routes: {
"route_Page1": (context) => Page1(),
......
},
// 路由发生错误,进入到该指定页面
onUnknownRoute: (RouteSettings setting) =>
MaterialPageRoute(builder: (context) => ErrorPage()),
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
通过 Navigator.pushNamed 传入 arguments 属性;然后在打开的页面 通过 ModalRoute.of(context).settings.arguments来获取参数;参数的回传通过 Navigator.pop 方法
1. 传递参数:
Navigator.pushNamed(context, "route_Page3", arguments: "hello"),
2. 接收参数:
class Page3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
String msg = ModalRoute.of(context).settings.arguments as String;
return Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(
title: Text("传递参数"),
),
body: Text("得到的参数是:$msg"),
);
}
}
3, 参数的回传
class Page4 extends StatelessWidget {
@override
Widget build(BuildContext context) {
String msg = ModalRoute.of(context).settings.arguments as String;
return Scaffold(
backgroundColor: Colors.yellow,
appBar: AppBar(
title: Text("返回参数"),
),
body: Text("得到的参数是:$msg"),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.backspace),
onPressed: () => Navigator.pop(context, "hi"),
),
);
}
}
4. 回传参数的接收:通过then方法
Navigator.pushNamed(context, "route_Page4", arguments: "hello")
.then((value) => print("返回的参数是$value")),
页面间的跳转通过 Navigator 和 PageRoute来完成,有两种方式:基本路由 和命名路由;由于使用命名路由可能存在 路由找不到页面的情况,所以通过配置 onUnknownRoute 属性来确定,在路由找不到的时候进入到指定页面;通过通过介绍页面跳转的参数传递和介绍,完成了页面跳转的介绍。
以上就是详解Flutter的路由导航的详细内容,更多关于Flutter 路由导航的资料请关注编程网其它相关文章!
--结束END--
本文标题: 详解Flutter的路由导航
本文链接: https://www.lsjlt.com/news/122891.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0