谈一谈页面的跳转与数据传递
「小新」在技术群里又看到大家在讨论 flutter 相关的知识点,flutter 出来已经有段时间了,可自己并没有深入学习,记得上次配好了环境,编译成功「Hello word」后,就搁置了。是时候重新拾起来,闻道有先后,本来就落后他人,只能更加努力。
对于初学 flutter 的「小新」,遇到了一个小问题,页面怎样跳转与传递数据?
在 Android 中,页面的跳转是通过来 Intent 来实现的:
Intent intent = new Intent(MainActivity.this,SecondActivity.class);
startActivity(intent);
数据传递多种方法,常见的可以用 intent、Bundle、静态变量,甚至还可以通过持久化来传递数据,如数据库,file,sp 等。
那么 flutter 又怎么实现页面跳转与数据传递?导航 Navigator 的概念应运而生。
flutter 中的默认导航分成两种,一种是命名的路由;一种是构建路由。
相信大家对阿里开源的 ARouter 的框架肯定不陌生,路由的设计应用非常广,不仅在前端流行,比如在 vue、reactjs、Angular 中用到,而且在后端应用中也非常成熟。
在 flutter 中具体的实现:
final Map<String, WidgetBuilder> routes;
命名路由
这种路由需要一开始现在创建 App 的时候定义(不能传递参数):
new MaterialApp(
....
routes: {
"nameRoute":(BuildContext context)=>new SecondPage(),
},
);
然后就可以在程序中使用 Navigator.pushNamed 来跳转:
Navigator.pushNamed(context, "nameRoute");
构建路由
在 push 的时候使用自定义方法构建一个路由(能传递参数):
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return new ThirdPage(title:"请输入昵称");
}))
界面的跳转
从「主界面」跳转到「下一界面」的代码如下(main.dart 类):
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: '页面跳转',
home: new MainPage(),
));
}
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('主界面'),
backgroundColor: Colors.blueAccent,
),
body: new Center(
child: new RaisedButton(
child: new Text('下一个界面'),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) {
return new SecondPage();
}),
);
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('第二个页面'),
backgroundColor: Colors.pinkAccent,
),
body: new Center(
child: new RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: new Text('返回主界面'),
),
),
);
}
}
效果如图:
跳转的相关代码:
Navigator.push(
context,
new MaterialPageRoute(builder: (context) {
new SecondPage();
}),
);
参数 context:代表上下文,指的是当前的这个页面窗口,与 Android 中的 this 类似。
MaterialPageRoute 里面已经实现了具体的方法,此处的 Material 中文翻译为一种材质设计风格,Material Design 风格为谷歌设计,它是一种界面设计标准,为平板、手机、web 等提供一致、广泛的外观,目前在国外是一种非常受欢迎的 UI 设计标准。Material Design 简洁的界面备受国内人士的喜爱。
Navigator.push, Navigator 具体翻译为导航、跳转。push 翻译为推,还记得 adb push 命令吗?把文件推到手机上,这里理解成追加一个界面,显示在当前窗口。
有推,那就有出:
Navigator.pop(context);
关闭当前界面,返回到上一个界面。
数据传递
从前一个界面传递 int 数据到下一个界面:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: '页面跳转',
home: new MainPage(),
));
}
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var data = 666;
return new Scaffold(
appBar: new AppBar(
title: new Text('主界面'),
backgroundColor: Colors.blueAccent,
),
body: new Center(
child: new RaisedButton(
child: new Text('下一个界面 \n'
'传递数据666'),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) {
return new SecondPage(666);
}),
);
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
int receiveData = 0;
SecondPage(int i) {
receiveData = i;
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('第二个页面'),
backgroundColor: Colors.pinkAccent,
),
body: new Center(
child: new RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: new Text('返回主界面 \n' + '接收到的数据:' + receiveData.toString()),
),
),
);
}
}
效果如下图:
「有参」构造,与 java 类似:
SecondPage(int i) {
receiveData = i;
}
国外页面「传值」用的比较多的是 fluro 第三方框架。有关 fluro 的初识将在下一篇讲到。
恭喜上期,人品红包的获奖名单:「无畏」
扫一扫 关注我的公众号
想了解更多flutter基础知识吗~
推荐阅读:
请长按下图小程序: