Flutter--Route和Navigator（二）
2020-12-14 本文已影响0人
小迷糊_dcee
Navigator的各种跳转方式
我们已经知道如何简单在路由栈中 push、pop 实例，然而，当遇到一些特殊的情况，这显然不能满足需求。学习 Android 的同学知道 Activity 的各种启动模式可以完成相应需求，Flutter 当然也有类似的可以解决各种业务需求的实现方式
| 方法 | 说明 |
|---|---|
| Navigator.pop() | 销毁当前页面 |
| Navigator.popAndPushNamed() | 销毁当前页面，并跳转到指定页面 1--push-->2--popAndPushNamed-->3 栈内有1，3 |
| Navigator.popUntil() | 直接回退到指定页面并销毁其余页面 1--push-->2--push-->3--push-->4 4点击按钮调用Navigator.popUntil(context, ModalRoute.withName("/page1")),会销毁页面4,3,2,跳转到页面1 栈内只有1 |
| Navigator.push() | 跳转到指定页面 1--push--2 1跳转到2,1不会销毁 栈内有1，2 |
| Navigator.pushNamed() | 命名路由跳转到指定页面 1--pushNamed--2 1跳转到2，1不会销毁 栈内有1，2 |
| Navigator.pushReplacement() | 新的页面替换当前页面 1--push-->2--push-->3--pushReplacement-->4 栈内有1，2，4 |
| Navigator.pushReplacementNamed() | 新的页面替换当前页面 1--push-->2--push-->3--pushReplacementNamed-->4 栈内有1，2，4 |
| Navigator.pushNamedAndRemoveUntil() | 跳转到新的页面，并且删除新页面和底部页面之间所有页面 1--push-->2--push-->3--pushNamedAndRemoveUntil-->4 Navigator.pushNamedAndRemoveUntil(context, "/page4", ModalRoute.withName("/page1")); 栈内有1，4 |
| Navigator.pushAndRemoveUntil() | 跳转到新的页面，并且删除新页面和底部页面之间所有页面 1--push-->2--push-->3--pushAndRemoveUntil-->4 Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (context) => MyPage4()), ModalRoute.withName('/page1')); 栈内有1，4 |
| Navigator.removeRoute() | 从Navigator中删除路由，同时执行Route.dispose释放Route自身资源，路由的生命周期结束 |
| Navigator.removeRouteBelow() | 从Navigator中删除路由，同时执行Route.dispose操作，要替换的路由是传入参数anchorRouter里面的路由 |
| Navigator.replace() | Navigator中的路由替换成一个新路由 |
| Navigator.replaceRouteBelow() | 将Navigator中的路由替换成一个新路由，要替换的路由是是传入参数anchorRouter里面的路由 |
| Navigator.canPop() | 判断当前页面能否被弹出栈，栈内只有一个页面时为false,别的时候为true |
| Navigator.maybePop() | 为canPop()的升级版，当前页面能在栈内能被弹出时就弹出栈，如果不能弹出则什么都不做 1--push-->2(maybePop),当前栈内只有1 1(maybePop),当前栈内只有1 |
注意：
1、Navigator.popUntil(context, ModalRoute.withName("/page1"))调用黑屏的问题，就算配置了路由也是黑屏
final routes = {
"/":(content,{arguments})=>RouteStudy(),
'/page1': (content) => MyPage1(),
'/page2': (content) => MyPage2(),
'/page3': (content) => MyPage3(),
'/page4': (content) => MyPage4()
};
解决方案：在添加1页面的时候添加一下代码
Navigator.push(
context,
MaterialPageRoute(
settings: RouteSettings(name:"/page1"),
builder: (context) => MyPage1(),
),
);
再调用
Navigator.popUntil(context, ModalRoute.withName("/page1"))
2、Navigator.pushAndRemoveUntil()和Navigator.pushNamedAndRemoveUntil()，调用缺少底线页面
例如：1-->2-->3-->4(页面跳转顺序)
页面3调用Navigator.pushNamedAndRemoveUntil
Navigator.pushNamedAndRemoveUntil(
context, "/page4", ModalRoute.withName("/page1"));
或页面3调用Navigator.pushAndRemoveUntil
Navigator.pushAndRemoveUntil(
context, MaterialPageRoute(builder: (context) => MyPage4()),
ModalRoute.withName('/page1'));
page1如果未配置settings，那么栈内只有新添加的页面，没有别的页面，即只有page4
Navigator.push(
context,
MaterialPageRoute(
settings: RouteSettings(name:"/page1"),
builder: (context) => MyPage1(),
),
);
