我们在上一章回中介绍了Widget的State,本章回中将介绍Route
和Navigator
,闲话休提,让我们一起Talk Flutter吧。
概念介绍
到目前为止,我们介绍的内容都在一个页面中,本章回中将介绍中在Flutter中如何进行页面切换,这里说的页面切换和Android中的Activity
之间切换或者IOS中的UIViewController
之间的切换完全相同。
Flutter提供了Router
和Navigator
这两个类来实现页面之间的跳转。我觉得Flutter的页面跳转和IOS类似:提供了专门的页面跳转管理类,这个管理类在IOS中是UINavigationController
,在Flutter中是Navigator
.
使用方法
Router是一个抽象类,我们无法直接使用,常用的是它的子类PageRoute
或者基于Android设计风格的MaterialPageRoute
。Navigator提供了两个方法push和pop。
- push()方法实现页面跳转功能;
- pop()方法实现页面返回功能;
在这两个方法中需要使用Router类的参数当作页面跳转的对象。下面是这两个方法的原型:
static Future<T?> push<T extends Object?>(BuildContext context, Route<T> route) {}
static void pop<T extends Object?>(BuildContext context, [ T? result ]) {}
示例代码
我们先创建了一个叫名SecondRouter的页面,该页面使用的ScaffoldWidget
,因此它的顶部是AppBar,AppBar中自带返回箭头,点击返回前头后自动返回到上一个页面中。该页面的中间是一个OutlineButton
,该Button上显示Back文字,点击该Button也可以返回到上一个页面。该页面的详细代码如下:
class SecondRouter extends StatelessWidget {
const SecondRouter({Key? key}) : super(key: key);
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: const Text("This is the second page"),
backgroundColor: Colors.purpleAccent,
),
body: OutlinedButton(
onPressed: (){
Navigator.pop(context,
MaterialPageRoute(builder: (context){
return const HelloApp();
})
);
},
child: const Text("Back"),
),
);
}
}
接着我们在程序的主页面中使用Router和Navigator来实现页面跳转功能,详细的代码如下:
class StatefulAppEx extends StatefulWidget {
const StatefulAppEx({super.key});
State<StatefulWidget> createState() {
// TODO: implement createState
return _StatefulAppEx();
}
}
class _StatefulAppEx extends State<StatefulAppEx> {
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: OutlinedButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return const SecondRouter();
})
);
},
child: const Text("Go to Another Widget"),
),
),
);
}
}
在上面的代码中我们通过push
()方法跳转到了刚才定义的SecondRouter页面中,该方法的第二个参数是Router类的子类MaterialPageRoute
,该类提供了build必选参数,把跳转的widget赋值给该参数后就可以实现跳转功能,注意赋值时使用了匿名函数(类似Java中的lambda表达式)。
在上面的代码中我们把push
方法的内容都放到了Button的响应事件中(onPressed
()方法),点击Button后就可以跳转到第二个页面中。再回头看看第二个页面的代码,也使用类似的代码实现了跳转功能,不过它是从自己返回到主页面中,跳转的方法使用了pop,其实使用push方法也可以。
最后强调一下:在使用Navigator
和Router
实现页面跳转功能时需要把它们放到页面相关的Widget中,也就是StatelessWidget或者StatefullWidget类以及它们的子类,因为这些类提供了build方法,该方法中包含的Context
参数是页面跳转必不可以少的内容,否则程序就会报以下错误:
Navigator operation requested with a context that does not include a Navigator.
看官们,关于Route和Navigator的内容就介绍到这里,欢迎大家在评论区交流与讨论!