本文首发于公众号「刘望舒」
ReactNative入门系列
React Native组件
Flutter基础系列
前言
在Android开发中我们使用Intent来进行页面跳转,也称之为原生路由,后来出现了一些路由框架,比如ARouter。
在Flutter中进行界面跳转的就是路由,路由用Route类来进行表示,Navigator是对Route进行管理的Widget。这一篇文章我们来学习路由和数据传递。flutter路由的使用方式主要有两种,一种是新建路由,一种是注册路由。
1.新建路由
创建两个页面,第一个页面有一个按钮,点击这个按钮跳到第二个页面。先来实现第一个页面:
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(), maintainState: false));
},
),
),
);
}
}
通过Navigator.push()方法将一个Route对象添加到Navigator管理的Route堆栈中,这里的Route对象是一个MaterialPageRoute,它自带页面切换动画,并且适配了Android和iOS,如果是Android,页面进入动画是向上滑动并淡出,退出是相反的;如果是iOS,页面进入动画是从右侧滑入,退出同样是相反的。一般来说使用MaterialPageRoute就够用了,如果不满足需求,可以实现自定义Route。
接着来实现第二个页面,代码如下所示。
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);
},
),
),
);
}
}
Navigator.pop()方法用于关闭当前页面,返回上一个页面,并将当前的Route对象从Navigator管理的Route 堆中移除。
完整的代码如下所示。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter",
home: FirstPage(),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return