歡迎關注『郝先生談技術』頭條號，您的關注，是對作者最大的鼓勵，也是作者創作的動力
在上篇文章 中，我們實現了行星列表。這篇文章將實現頁面間跳轉。點擊每個列表項，跳轉到詳情頁，點擊返回按鈕，跳轉到列表頁。加黑字體代表新增代碼。
運行效果
路由和導航（Routing and navigation)
在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:
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:
),),
);
運行
完成後點擊Hot reload，iPhone8模擬器效果如下：
項目地址
[email protected]:hao2008/flutter-demo.git
下篇預告
行星之Hero動畫
閱讀更多 郝先生談技術 的文章
