Flutter开发之路由与导航的实现开发之路由与导航的实现
主要介绍了Flutter开发之路由与导航的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一
定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
如果说构成视图元素的基本单位是组件,那么构成应用程序的基本单位就是页面。对于拥有多个页面的应用程序而言,如何从
一个页面平滑地过渡到另一个页面,是技术框架需要考虑的问题。
在前端开发中,可以使用路由框架来统一管理页面及它们之间的跳转。在Android中路由指的是一个Activity,在iOS中指的是
一个ViewController,可以通过startActivity或pushViewController来打开一个新的路由。在Flutter中,路由的管理和导航借鉴
了前端和客户端的设计思路,需要使用Route和Navigator来进行统一管理。
其中,Route是页面的抽象,主要负责创建界面、接收参数以及响应导航器Navigator的打开与关闭。而Navigator则用于维护
路由栈管理,Route打开即入栈,Route关闭即出栈,当然还可以替换栈内的某一个Route。作为官方提供的路由管理组
件,Navigator提供了一系列方法来管理路由栈,其中最常用的两个方法是push()和pop(),它们的含义如下。
push():将给定的路由入栈,返回值是一个Future对象,用以接收路由出栈时的返回数据。
pop():将栈顶路由出栈,返回结果为页面关闭时返回给上一个页面的数据。
除了push()和pop()方法外,Navigator还提供了很多其它实用的方法,如replace()、removeRoute()和popUntil()等,可以根据
使用场景合理的选取。
根据是否需要提前注册页面标识符,Flutter中的路由管理可以分为基本路由和命名路由两种。
基本路由:无需提前注册,在页面切换时需要手动构造页面的实例。
命名路由:需要提前注册页面标识符,在页面切换时通过标识符直接打开新的路由。
下面就让我们重点来看一下Flutter中的路由管理的基本路由和命名路由等相关知识。
基本路由基本路由
在Flutter开发中,基本路由的使用方式和原生Android、iOS打开新页面的方式非常类似。要打开一个新的页面,只需要创建一
个MaterialPageRoute对象实例,然后调用Navigator.push()方法将新页面压到路由堆栈的顶部即可,如果要返回上一个页面,
则可以调用Navigator.pop()方法。
其中,MaterialPageRoute是一种路由模板,定义了路由创建以及路由切换过渡动画的相关配置,该配置可以根据不同的平台
实现与平台页面切换动画风格一致的路由切换动画。下面是使用Navigator实现页面跳转的示例,代码如下。
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第一个页面'),
),
body: Center(
child: RaisedButton(
child: Text('跳转到第二个页面'),
onPressed: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondPage()))),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
),
body: Center(
child: RaisedButton(
child: Text('返回上一个页面'),
onPressed: () => Navigator.pop(context)),
),
);
}
}
在上面的示例中,我们创建了两个页面,每个页面都包含一个按钮。当点击第一个页面上的按钮时将导航到第二个页面,点击
第二个页面上的按钮将返回第一个页面。运行上面的代码,效果如下图所示。