Navigator是一个管理路由的widget&＃xff1b;NavigatorKey是一个管理路由的Key&＃xff1b;看完本文你将学会路由的使用、管理好一个路由、路由传参、路由带参返回、 路由记录、返回到指定路由、路由动画&＃xff0c; 然后使用pop操作来进行回退到某个路由&＃xff1b;
| 方法 | 作用 |
|---|
我们创建个普通路由跳转&＃xff0c;跳转到原页面&＃xff0c;但是标题的数量会&＃43;1&＃xff0c;让我们知道当前是push到的第几个页面&＃xff1b;
路由跳转传参示例&＃xff1a;
import &＃39;package:flutter/material.dart&＃39;;void main() &＃61;> runApp(MyApp());class MyApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return new MaterialApp(title: &＃39;Flutter高级进阶&＃39;,home: new MyHomePage(),);}
}class MyHomePage extends StatefulWidget {// 接收的num参数final int num;// MyHomePage不写参数则默认为1MyHomePage({this.num &＃61; 1});&＃64;override_MyHomePageState createState() &＃61;> _MyHomePageState();
}class _MyHomePageState extends State
}
效果图&＃xff1a;
class MyApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return new MaterialApp(title: &＃39;Flutter高级进阶&＃39;,home: new Scaffold(appBar: new AppBar(),body: new FlatButton(child: new Text("push"), onPressed: () &＃61;> push(context)),),);}/** 路由跳转方法* */push(context) {//导航到新路由Navigator.push(context,MaterialPageRoute(// MyHomePage不写参数则默认为1builder: (context) &＃61;> MyHomePage()),);}
}
报错信息&＃xff1a;
I/flutter (21935): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
I/flutter (21935): The following assertion was thrown while handling a gesture:
I/flutter (21935): Navigator operation requested with a context that does not include a Navigator.
I/flutter (21935): The context used to push or pop routes from the Navigator must be that of a widget that is a
I/flutter (21935): descendant of a Navigator widget.
I/flutter (21935):
I/flutter (21935): When the exception was thrown, this was the stack:
I/flutter (21935): #0 Navigator.of.
I/flutter (21935): #1 Navigator.of (package:flutter/src/widgets/navigator.dart:1482:6)
I/flutter (21935): #2 Navigator.push (package:flutter/src/widgets/navigator.dart:1107:22)
I/flutter (21935): #3 MyApp.push (package:oc_project/main.dart:18:15)
I/flutter (21935): #4 MyApp.build.
I/flutter (21935): #5 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:654:14)
I/flutter (21935): #6 _InkResponseState.build.
I/flutter (21935): #7 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
I/flutter (21935): #8 TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:365:11)
I/flutter (21935): #9 TapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:275:7)
I/flutter (21935): #10 PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:455:9)
I/flutter (21935): #11 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:75:13)
I/flutter (21935): #12 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:102:11)
I/flutter (21935): #13 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:218:19)
I/flutter (21935): #14 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22)
I/flutter (21935): #15 GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7)
I/flutter (21935): #16 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7)
I/flutter (21935): #17 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7)
I/flutter (21935): #21 _invoke1 (dart:ui/hooks.dart:263:10)
I/flutter (21935): #22 _dispatchPointerDataPacket (dart:ui/hooks.dart:172:5)
I/flutter (21935): (elided 3 frames from package dart:async)
I/flutter (21935):
I/flutter (21935): Handler: "onTap"
I/flutter (21935): Recognizer:
I/flutter (21935): TapGestureRecognizer#72729
这个报错是因为用的这个上下文是MaterialApp的&＃xff0c;这个上下文不包含Navigator导航器操作&＃xff0c; 所以我们应该把home的那部分抽出来放另一个类&＃xff1b;
路由传参在上面那个例子已经有了&＃xff0c;num就是我们的参数&＃xff0c;然后显示在标题上就是使用了。
这节教大家路由传值并返回值&＃xff0c;创建个NewPage&＃xff0c;接收个文本值text&＃xff0c;然后显示在新页面&＃xff0c;新页面给个返回按钮&＃xff0c; 点击返回按钮返回并带回一串值回去。
NewPage&＃xff1a;
class NewPage extends StatelessWidget {final String text;NewPage({&＃64;required this.text, // 接收一个text参数});&＃64;overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text("新页面&＃xff1a;$text")),body: new RaisedButton(onPressed: () &＃61;> Navigator.pop(context, "我是返回值"),child: new Text("返回"),),);}
}
然后之前写好的push方法改下&＃xff0c;用then接收&＃xff1a;
/** 路由跳转方法* */
push() {//导航到新路由Navigator.push(context,MaterialPageRoute(// 拿到传过来的num然后&＃43;&＃43;传给下一级builder: (context) &＃61;> NewPage(text: &＃39;参数&＃39;),),).then((value) {if (value !&＃61; null) print(&＃39;接收到的参数&＃xff1a;$value&＃39;);});
}
这样我们就能push到新页面然后点击返回按钮就能把参数返回到push到它的那个方法&＃xff0c;然后在then打印出来了&＃xff1a;
I/flutter (21935): 接收到的参数&＃xff1a;我是返回值
直接点击左上角那个返回值会为空&＃xff0c;这样打印出来的就是&＃xff1a;
I/flutter (21935): 接收到的参数&＃xff1a;null
所以我们做了一个判断&＃xff0c;不为空才执行打印&＃xff0c;如果为空就不做任何操作&＃xff1b;
我们想执行跟name有关的Navigator方法就必须先给路由命名&＃xff0c;比如pushNamed方法, 注册路由在MaterialApp的routes属性&＃xff0c;它的定义为&＃xff1a;
final Map
class MyApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return new MaterialApp(title: &＃39;Flutter高级进阶&＃39;,routes: {"newPage": (context) &＃61;> new NewPage(text: &＃39;注册路由名的新页面&＃39;),},home: new MyHomePage(),);}
}
这样我们的newPage就注册好了&＃xff0c;然后试试pushNamed方法&＃xff1a;
/** 路由跳转方法* */
push() {Navigator.pushNamed(context, "newPage").then((value) {if (value !&＃61; null) print(&＃39;接收到的参数&＃xff1a;$value&＃39;);});
}
效果图&＃xff1a;
这节我们使用popUntil方法返回到我们想要返回到的某个路由&＃xff0c;首先再注册两个路由名&＃xff1a;
&＃64;override
Widget build(BuildContext context) {return new MaterialApp(title: &＃39;Flutter高级进阶&＃39;,routes: {// 新页面路由名"newPage": (context) &＃61;> new NewPage(text: &＃39;注册路由名的新页面&＃39;),// 第二个路由名"towPage": (context) &＃61;> new TowPage(),// 首页路由名"/": (context) &＃61;> new MyHomePage(),},
// home: new MyHomePage(), 这个必须注释&＃xff0c;因为我们注册了根路由名&＃xff1a;"/"&＃xff0c;否则报错);
}
TowPage:
class TowPage extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: new AppBar(title: new Text(&＃39;页面二&＃39;)),body: new RaisedButton(onPressed: () &＃61;> Navigator.popUntil(context, ModalRoute.withName(&＃39;/&＃39;)),child: new Text("返回到首页"),),);}
}
然后NewPage把返回改成push到第二个页面&＃xff1a;
class NewPage extends StatelessWidget {final String text;NewPage({&＃64;required this.text, // 接收一个text参数});&＃64;overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text("新页面&＃xff1a;$text")),body: new RaisedButton(onPressed: () &＃61;> Navigator.pushNamed(context, "towPage"),child: new Text("到第二个页面"),),);}
}
效果图&＃xff1a;
这样就实现了到第二个页面的时候点击回到首页按钮就直接返回到首页了。
我们每次跳转一个新路由然后想返回到之前跳转过的某个路由难道每个都要注册路由名吗&＃xff1f;那样的话太麻烦了&＃xff0c; 这节就教大家路由记录&＃xff0c;只要我们跳转过某个路由就记录起来&＃xff0c; 然后最后面的路由想返回到前面的三个中的某个都不需要配置名字了。
/** 路由跳转方法* */
push() {Navigator.push(context,MaterialPageRoute(builder: (context) &＃61;> MyHomePage(),settings: new RouteSettings(name: MyHomePage().toStringShort(), // 设置的路由名isInitialRoute: false, // 是否初始路由),),);
}
这样我们就把我们要跳转到的MyHomePage跳转了&＃xff0c;同时还记录了路由名字&＃xff1b;
class TowPage extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: new AppBar(title: new Text(&＃39;页面二&＃39;)),body: new RaisedButton(onPressed: () &＃61;> Navigator.popUntil(context,// 使用记录好的路由名字ModalRoute.withName(MyHomePage().toStringShort()),),child: new Text("返回到MyHomePage"),),);}
}
这样我们就可以完美的返回到MyHomePage页面了&＃xff0c;使用起来非常方便。
路由动画就是我们跳转到下一个路由栈的时候所产生的过度动画&＃xff0c;官方提供了两个动画&＃xff1a; MaterialPageRoute、CupertinoPageRoute&＃xff1b;
import &＃39;package:flutter/material.dart&＃39;;包&＃xff1b;import &＃39;package:flutter/cupertino.dart&＃39;;包&＃xff1b;直接把我们用来push的MaterialPageRoute更改为&＃xff1a;CupertinoPageRoute即可查看动画效果&＃xff1b;
首先编写好一个路由动画&＃xff0c;路由动画必须继承至PageRouteBuilder&＃xff1a;
/*
* 渐变动画
* */
class FadeRoute extends PageRouteBuilder {// 传过来的页面pagefinal Widget page;// 构造FadeRoute({this.page}): super(pageBuilder: (BuildContext context,Animation
}
然后push方法直接更改为&＃xff1a;
push() {Navigator.push(context,FadeRoute(page: MyHomePage()),);
}
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有