Flutter 中，一切皆 Widget !!!!
Remember: Screens are Just Widgets™.
今天来学习一下 Flutter 中常用的一些跳转方式。在安卓中我们常用的跳转是通过 Intent 跳转到 新的页面(Activity) 中，Intent 其实就可以简单的等价于 一种路由。
跳转的实现包括简单的跳转&返回；带数据跳转；跳转后回传数据等等，接下里我们就将这些场景适配到 Flutter 中。
在 Flutter 中，页面跳转需要用到路由 Navigator.
1.跳转到新页面并返回
摘自官网
1. Create two screens
2. Navigate to the second screen using Navigator.push
3. Return to the first screen using Navigator.pop
意思是跳转到新页面使用 Navigator.push() 方法，返回上个页面使用 Navigator.pop() 方法
接下来就创建两个简单的页面，TestScreen.dart, TestScreen2.dart 两个页面
TestScreen.dart：
class TestScreenState extends State<TestScreen> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("第一页"),
),
body: Center(
child: new GestureDetector(
onTap: () {},
child: Text("跳转到第二个页面"),
),
),
);
}
}
TestScreen2.dart
class TestScreen2State extends State<TestScreen2> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("第二页"),
),
body: Center(
child: new GestureDetector(
onTap: () {},
child: Text("我是第二个页面"),
),
),
);
}
}
很简单的两个页面，居中显示一个 文本 控件。然后给他设置了手势实现点击事件。现在开始给第一个页面添加点击事件处理，直接调用 Navigator.push()方法，参数需要传递一个 Route 对象。Route 我们可以自己创建一个，也可以使用系统给我们提供的 MaterialPageRoute
如下：
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => TestScreen2()));
},
现在我们在第二个页面了，那么怎么回到第一个页面呢？
此时需要调用 Navigator.pop(context) 即可回到上个页面了~
2.传递数据到新页面
简单的通过实体类传递一组信息。
先创建一个实体类，此处建了一个 User 类保存了 name 和 age 两个字段信息
class User {
final String name;
final int age;
User(this.name, this.age);
}
然后在第一个页面中的点击事件的时候创建一个 User 对象，并传入 Screen2 的构造中
onTap: () {
User xiaoming = new User("小明",25);
Navigator.push(context,
MaterialPageRoute(builder: (context) => TestScreen2(user: xiaoming)));
},
Screen2 的处理
class TestScreen2 extends StatelessWidget {
final User user;
const TestScreen2({Key key, this.user}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text(
"第二页",
style: shenshen(color: Colors.greenAccent),
),
),
body: Center(
child: new GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Text(
"传过来的的 User name = ${[user.name](http://user.name)}, age = ${user.age}",
style: TextStyle(fontSize: 28.0, color: Colors.redAccent),
),
),
),
);
}
}
上边的例子中是用 StagelessWidget 接收的参数，但是我们开发中用的最多的肯定是 StagefulFidget,那么该怎么处理呢？
其实也不难，也是通过构造函数的形式传递，但是传递过去之后，User 是留存在 TestScreen2 这个 Class 中的，那么我们需要在 他的 TestScreenState 这个 Class 中使用，那么怎么用呢？只需要在 state 这个 Class 中，调用 widget.user 就能获取 user 对象了。简单吧~
class TestScreen2 extends StatefulWidget {
final User user;
const TestScreen2({Key key, this.user}) : super(key: key);
@override
State<StatefulWidget> createState() => TestScreen2State();
}
class TestScreen2State extends State<TestScreen2> {
@override
Widget build(BuildContext context) {
**var localUser = widget.user;**
return new Scaffold(
appBar: AppBar(
title: Text(
"第二页",
style: TextStyle(color: Colors.greenAccent),
),
),
body: Center(
child: new GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Text(
"StatefulWidget：传过来的的 User name = ${[localUser.name](http://localUser.name)}, age = ${localUser.age}",
style: TextStyle(fontSize: 28.0, color: Colors.redAccent),
),
),
),
);
}
}
3.新页面传递数据给旧页面
在 Android 开发中，我们可能会用到 startActivityForResult 等类似的方法实现，从 B 页面 回到 A 页面的时候带回来一些数据，那么这种场景怎么在 Flutter 中实现呢？
当然了 还是直接使用 Navigator.pop() 方法，第二个参数就是你传递回去数据啦~
然后在第一个页面中，使用异步方式，调用的 push() 方法，就会获取 传递过来的信息了
_startNewPageAndeGetReturnData(BuildContext context) async {
User xiaoming = new User("小明", 25);
final result = await Navigator.push(context,
MaterialPageRoute(builder: (context) => TestScreen2(user: xiaoming)));
print("这地方打印的是新页面传递回来的信息："+[result.name](http://result.name) +" "+ result.age.toString());
}
4.共享动画跳转
网友评论