Flutter基础(十二)路由(页面跳转)与数据传递

作者: 分类: 奇闻 发布时间: 2019-07-30 12:19

ReactNative入门系列
React Native组件
Flutter基础系列



在Android开发中我们使用Intent来进行页面跳转,也称之为原生路由,后来出现了一些路由框架,比如ARouter。 在Flutter中进行界面跳转的就是路由,路由用Route类来进行表示,Navigator是对Route进行管理的Widget。这一篇文章我们来学习路由和数据传递。flutter路由的使用方式主要有两种,一种是新建路由,一种是注册路由。

创建两个页面,第一个页面有一个按钮,点击这个按钮跳到第二个页面。先来实现第一个页面:

class FirstPage extends StatelessWidget {
 @override
 Widget build {
 return Scaffold,
 body: Center,
 onPressed:  {
 Navigator.push = SecondPage, maintainState: false));
复制代码

通过Navigator.push方法将一个Route对象添加到Navigator管理的Route堆栈中,这里的Route对象是一个MaterialPageRoute,它自带页面切换动画,并且适配了Android和iOS,如果是Android,页面进入动画是向上滑动并淡出,退出是相反的;如果是iOS,页面进入动画是从右侧滑入,退出同样是相反的。一般来说使用MaterialPageRoute就够用了,如果不满足需求,可以实现自定义Route。 接着来实现第二个页面,代码如下所示。

class SecondPage extends StatelessWidget {
 @override
 Widget build {
 return Scaffold,
 body: Center,
 onPressed:  {
 Navigator.pop;
复制代码

Navigator.pop方法用于关闭当前页面,返回上一个页面,并将当前的Route对象从Navigator管理的Route 堆中移除。 完整的代码如下所示。

import 'package:flutter/material.dart';
void main = runApp);
class MyApp extends StatelessWidget {
 @override
 Widget build {
 return MaterialApp,
class FirstPage extends StatelessWidget {
 @override
 Widget build {
 return Scaffold,
 body: Center,
 onPressed:  {
 Navigator.push = SecondPage,
 maintainState: false,
class SecondPage extends StatelessWidget {
 @override
 Widget build {
 return Scaffold,
 body: Center,
 onPressed:  {
 Navigator.pop;
复制代码

运行程序,效果如下所示。

Zc1mCt.png

如果很多页面都跳转到了同一个页面,每次都要新建路由,那么会写很多重复的代码,使用注册路由就可以简化。

import 'package:flutter/material.dart';
void main = runApp);
class MyApp extends StatelessWidget {
 @override
 Widget build {
 return MaterialApp = FirstPage,
 "/Second":  = SecondPage
 home: FirstPage,
class FirstPage extends StatelessWidget {
 @override
 Widget build