FlutterNavigator高级用法-汇总完整版.pdfVIP

FlutterNavigator⾼级⽤法 在上⼀篇我们已经讲了Flutter Navigation的基本使⽤，有兴趣或者对这⼀块还不太了解的同学可以去看看。在实际项⽬中我们可能会遇到 ⼀些⽐较特殊或者复杂的需求，⽽基本的跳转⽅式已经不能满⾜了，这⼀篇我们主要看⼀下Flutter的⼀些⽐较品如的跳转操作。 不得不说Flutter真的很良⼼，提供的⼀些跳转⽅式都⾮常实⽤，让我们⽇常的开发效率提升了很多，下⾯我们就⼀个⼀个的来介绍吧。 1.PushAndRemove 假设有这么⼀个场景：我们在开发⼀个商城项⽬，从选择商品到⽀付完成会经过主页⾯，商品列表页，商品详情页，⽀付页⾯，⽀付结果 页。这时候来了⼀个需求，当跳转到⽀付结果页的时候将之前所有的页⾯都销毁，只留下主页⾯。如果是android可能会⽤到singletask或 者⾃⼰写⼀个activity管理器之类的，但是这些实现⽅式都显得不那么优雅直接，⽽Flutter给出的跳转⽅案能完美地解决这类问题。 下⾯我们来看⼀下对于这类场景Flutter地解决⽅案 新建4个页⾯，Screen1，Screen2，Screen3，Screen4 在MaterialApp中添加这4个页⾯的路由 使⽤Navigator.of(context).pushAndRemoveUntil()或者Navigator.of(context).pushNamedAndRemoveUntil()进⾏跳转 1.1 新建页⾯ class Screen1 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( alignment: Alignment.center, child: RaisedButton( onPressed: () { Navigator.pushNamed(context, /screen2); }, child: Text( screen1, style: TextStyle(fontSize: 30), ), ), ); } } 其它三个页⾯的样式和Screen1保持⼀致，点击按钮跳转到下⼀个页⾯ 1.2 在MaterialApp中添加这4个页⾯的路由 @override Widget build(BuildContext context) { return MaterialApp( title: Flutter Demo, theme: ThemeData( primarySwatch: Colors.blue, ), routes: { /screen1: (context) = Screen1(), /screen2: (context) = Screen2(), /screen3: (context) = Screen3(), /screen4: (context) = Screen4(), }, initialRoute: /screen1, ); } 1.3 进⾏跳转操作 本例中我们的跳转顺序是Screen1—Screen2—Screen3—Screen4 当从Screen3跳转到Screen4的时候我们希望将Screen2，Screen3从栈⾥⾯移除掉，这样在Screen4点击返回就能直接回到Screen1 使⽤Navigator.pushAndRemoveUtil()或者Navigator.pushNamedAndRemoveUntil()实现，这个⽅法有两个必传参数newRoute和 predicate，第⼀个参数表⽰将要加⼊栈中的页⾯，第⼆个参数表⽰栈中要保留的页⾯底线，意思就是在predicate和newRoute之间的页⾯ 都会被移除栈 class Screen3 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( alignment: Alignment.center, c