03每日一题

谈一谈页面的跳转与数据传递

「小新」在技术群里又看到大家在讨论 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基础知识吗~

推荐阅读：

Flutter学习之事件循环机制、数据库、网络请求

Flutter学习之入门和体验

请长按下图小程序：