flutter的入门与提高（Flutter教程-行星之路由）
flutter的入门与提高（Flutter教程-行星之路由）DetailPage(this.planet);final Planet planet;import 'package:demo/Planet.dart';③ 添加数据源、构造函数class DetailPage extends StatelessWidget {
欢迎关注『郝先生谈技术』头条号，您的关注，是对作者最大的鼓励，也是作者创作的动力
在上篇文章Flutter教程-行星之卡片列表（4）中，我们实现了行星列表。这篇文章将实现页面间跳转。点击每个列表项，跳转到详情页，点击返回按钮，跳转到列表页。加黑字体代表新增代码。
运行效果
在Flutter中，我们将应用中的每个页面都称作一个路由，导航器（Navigator）负责页面间跳转。类似于iOS及Android的导航控制器，导航栈（Navigation Stack）管理着一组路由，push为入栈，pop为出栈。
创建详情页面① 创建DetailPage.dart
② 导入Planet.dart
import 'package:demo/Planet.dart';
③ 添加数据源、构造函数
class DetailPage extends StatelessWidget {
final Planet planet;
DetailPage(this.planet);
}
④ 使用脚手架（Scaffold Widget）创建页面，显示planet.name和planet.image
class DetailPage extends StatelessWidget {
final Planet planet;
DetailPage(this.planet);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("详情页")
)
body: new Container(
constraints: new BoxConstraints.expand()
child: new Column(
mainAxisAlignment: MainAxisAlignment.center
children: <Widget>[
new Text(planet.name) // 显示名称
new Image.asset(
planet.image // 显示图片
width: 96.0
height: 96.0
)] ) ));
}}
跳转到详情页
① 打开PlanetRow.dart
② 在build()函数中，添加事件部件（GestureDetector），并添加点击事件
return new GestureDetector(
onTap: _pushToDetail(context planet)
child: new Container(
height: 120.0
margin: const EdgeInsets.symmetric(
vertical: 16.0
horizontal: 24.0
)
child: new Stack(
children: <Widget>[planetCard planetThumbnail]
) )
);
运行
完成后点击Hot reload，iPhone8模拟器效果如下：
git@github.com:hao2008/flutter-demo.git
下篇预告行星之Hero动画
