Flutter 之页面切换

来源:http://www.chinese-glasses.com 作者:Web前端 人气:120 发布时间:2020-04-15
摘要:时间: 2019-10-01阅读: 169标签: 页面 时间: 2019-07-03阅读: 250标签: 路由Route 一个应用程序通常由多个页面组成,而统一管理页面之间跳转的机制通常被称为路由管理或导航管理 所谓路由管理

时间: 2019-10-01阅读: 169标签: 页面

时间: 2019-07-03阅读: 250标签: 路由Route

一个应用程序通常由多个页面组成,而统一管理页面之间跳转的机制通常被称为路由管理或导航管理

所谓路由管理,就是管理页面之间如何跳转,也被称为导航管理。这和原生开发类似,无论是Android还是iOS,导航管理都是通过维护一个路由栈来实现的,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作。在Flutter开发中,实现页面跳转需要同时使用Route 和 Navigator。

路由管理

Route是一个应用程序抽象的屏幕或页面;Navigator 是一个管理路由的widget;

在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的

路由(Route),在移动开发中通常用来表示移动应用的页面(Page),具体来说,Route在Android中通常指一个Activity,在iOS中指一个ViewController。

Route:页面的抽象,主要负责创建对应的界面、接收参数、响应 Navigator 打开和关闭Navigator:维护一个路由栈来管理 Route,Route 打开即入栈,Route 关闭即出栈,还可以直接替换栈内的某一个 Route

Navigator是一个路由管理的widget,它通过一个栈来管理一个路由widget集合。通常当前屏幕显示的页面就是栈顶的路由,Navigator提供了一系列方法来管理路由栈。

根据是否需要提前注册页面标识符,Flutter 中的路由管理可以分为两种方式

示例

基本路由:无需提前注册,在页面切换时需要机自己构造页面实例命名路由:需要提前注册页面标识符,在页面切换时通过标识符直接打开新的路由基本路由

为了说明Flutter是如何实现路由跳转的,我们创建两个页面:NewRoute.dart和main.dart。其中,NewRoute.dart的源码如下:

在 Flutter 中,使用基本路由要导航到一个新的页面时,需要创建一个 MaterialPageRoute 的实例,并调用 Navigator.push 方法将新页面压到堆栈的顶部

import 'package:flutter/material.dart';import 'package:flutter/cupertino.dart';class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('新页面') ), body: new Center( child: new Text( '点击浮动按钮返回首页', ), ), floatingActionButton: new FloatingActionButton( onPressed: () { Navigator.of(context).pop(); }, child: new Icon(Icons.replay), ), ); }}

注意:MaterialPageRoute 是一种路由模板,定义了路由创建及切换过渡动画的相关配置

新路由继承自StatelessWidget,界面很简单,在页面中间显示一句"This is new route"。然后,修改main.dart的源码如下:

返回面则需要调用 Navigator.pop 方法将该页面从堆栈中移除

import 'package:flutter/material.dart';import 'package:flutter_demo/SecondPage.dart';void main() { runApp(new MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: '路由管理首页'), ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() = new _MyHomePageState();}class _MyHomePageState extends StateMyHomePage { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Text( '点击浮动按钮打开新页面', ), ), floatingActionButton: new FloatingActionButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) = SecondPage())); }, child: new Icon(Icons.open_in_new), ), ); }}

如下代码演示了基本路由的使用方法:在第一个页面的按钮事件中打开第二个页面,并在第二个页面的三个按钮事件中分别实现如下功能:回退到第一个页面;以无参形式打开第三个页面,并从堆栈中移除第二个页面;以有参形式打开第三个页面

运行上面的代码,当我们点击按钮后,路由就会打开一个新的路由页面

class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new FloatingActionButton( child: Text('跳转'), // 打开第二个页面 onPressed: () { Navigator.push( context, new MaterialPageRoute( builder: (context) = new SecondPage()), ); }))); }}class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: Text("第二页"), centerTitle: true, ), body: new Center( child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: Widget[ new FloatingActionButton( child: new Text('关闭'), // 回退到第一个页面 onPressed: () { Navigator.pop(context); }), new RaisedButton( child: new Text('第三页,无参'), // 以无参形式打开第三个页面,并从堆栈中移除当前页面 onPressed: () { Navigator.pop(context); Navigator.push( context, new MaterialPageRoute( builder: (context) = new ThreePage())); }), new FlatButton( onPressed: () { // 以有参形式打开第三个页面 Navigator.push( context, MaterialPageRoute( builder: (context) = ThreePage('Android小白营'))); }, child: Text('第三页,有参')) ], ), )); }}class ThreePage extends StatelessWidget { String name; ThreePage([this.name]); @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('第三页'), centerTitle: false, ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: Widget[ new FlatButton( onPressed: () = Navigator.pop(context), child: Text('回退')), new Text(name ??= '测试') ]))); }}

MaterialPageRoute

10bet,可以看到,使用基本路由导航到一个新页面时,可以通过新页面的构造方法进行传参,跳转新页面时,可以将当前页面从堆栈中移除,也可以保留,如果移除,则新页面回退时,会回退到上上个页面,而如果保留,则新页面回退时,会回退到启动新页面的页面,即回退到上一个页面

MaterialPageRoute继承自PageRoute类,PageRoute类是一个抽象类,表示占有整个屏幕空间的一个模态路由页面,它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是Material组件库的一个Widget,它可以针对不同平台,实现与平台页面切换动画风格一致的路由切换动画,具体来说:

对于Android,当打开新页面时,新的页面会从屏幕底部滑动到屏幕顶部;当关闭页面时,当前页面会从屏幕顶部滑动到屏幕底部后消失,同时上一个页面会显示到屏幕上。对于iOS,当打开页面时,新的页面会从屏幕右侧边缘一致滑动到屏幕左边,直到新页面全部显示到屏幕上,而上一个页面则会从当前屏幕滑动到屏幕左侧而消失;当关闭页面时,正好相反,当前页面会从屏幕右侧滑出,同时上一个页面会从屏幕左侧滑入。

我们使用MaterialPageRoute来完成路由跳转时,MaterialPageRoute构造函数提供了几个的,参数,格式如下:

 MaterialPageRoute({ WidgetBuilder builder, RouteSettings settings, bool maintainState = true, bool fullscreenDialog = false, })

这些参数的具体含义如下:

builder 是一个WidgetBuilder类型的回调函数,它的作用是构建路由页面的具体内容,返回值是一个widget。我们通常要实现此回调,返回新路由的实例。settings 包含路由的配置信息,如路由名称、是否初始路由(首页)。maintainState:默认情况下,当入栈一个新路由时,原来的路由仍然会被保存在内存中,如果想在路由没用的时候释放其所占用的所有资源,可以设置maintainState为false。fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框,在iOS中,如果fullscreenDialog为true,新页面将会从屏幕底部滑入(而不是水平方向)。Navigator

Navigator是Flutter应用开发中的一个路由管理的widget,它通过一个栈来管理一个路由widget集合。通常,当前屏幕显示的页面就是栈顶的路由。Navigator提供了一系列方法来管理路由栈,我们可以使用 push 和 pop 两个操作来进行页面的入栈和出栈。

push

将给定的路由入栈(即打开新的页面),返回值是一个Future对象,用以接收新路由出栈(即关闭)时的返回数据。

执行push 操作时,我们主要使用两个方法:一个是直接 push 一个路由,另外一个是 pushNamed 一个命名路由地址。

push方式

下边是 Navigator.push 的源码,入参的 Route 对象中有一个 RouteSettings 成员变量,我们可以在构造 Route 对象的时候将需要传递的参数放在 RouteSettings 中。

@optionalTypeArgsstatic FutureT pushT extends Object(BuildContext context, RouteT route) { return Navigator.of(context).push(route);}

如果涉及到传递参数,那么我们可以将参数放在 SecondScreen 的构造函数中,也可以放在构造的 MaterialPageRoute 的 RouteSettings 中。

Navigator.push( context, new MaterialPageRoute(builder: (context) = new SecondScreen()),).then((data){ //接受返回的参数 print(data.toString());};

pushNamed方式

pushNamed方式的实现最终调用的也是 push 方法,这中方法直接暴露了参数 Object arguments ,源码如下:

@optionalTypeArgsstatic FutureT pushNamedT extends Object( BuildContext context, String routeName, { Object arguments, }) { return Navigator.of(context).pushNamedT(routeName, arguments: arguments);}@optionalTypeArgsFutureT pushNamedT extends Object( String routeName, { Object arguments,}) { return pushT(_routeNamedT(routeName, arguments: arguments));}

使用pushNamed方式时,需要将路由注册到路由表中,例如:

Navigator.of(context) .pushNamed( '/route1', arguments: { "name": 'hello' } ).then((data){ //接受返回的参数 print(data.toString()); };

pop

本文由10bet发布于Web前端,转载请注明出处:Flutter 之页面切换

关键词:

上一篇:Python之实现一个简易计算器

下一篇:没有了

最火资讯