Flutter 中的頁面跳轉及頁面之間傳參（路由跳轉）

大多數應用程式具有多個頁面或視圖，并且希望将使用者從頁面平滑過渡到另一個頁面。Flutter 的路由和導航功能可幫助你管理應用中螢幕之間的命名和過渡。

管理多個頁面時有兩個核心概念和類：Route 和 Navigator。 一個 Route 是一個螢幕或頁面的抽象，Navigator 是管理 Route 的 Widget。Navigator 可以通過使 Route 入棧和出棧來實作頁面之間的跳轉。

在 Android 開發中，Activity 相當于“路由”，在 iOS 開發中，ViewController 相當于“路由”。在 Flutter 中，“路由”也是一個 widget。

注：在 Flutter 中，屏 (screen) 和 頁面 (page) 都叫做路由 (route)。

用 Navigator.push() 跳轉到第二個路由

使用 Navigator.push() 方法跳轉到新的路由， push() 方法會添加一個 Route 對象到導航器的堆棧上。那麼這個 Route 對象是從哪裡來的呢？你可以自己實作一個，或者直接使用 MaterialPageRoute 類。使用 MaterialPageRoute 是非常友善的，架構已經為我們實作了和平台原生類似的切換動畫。

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}
           

用 Navigator.pop() 回退到第一個路由

現在，我們想結束掉第二個路由，傳回到第一個路由，應該如何操作呢？

其實非常簡單，直接調用 Navigator.pop() 即可。使用 Navigator.pop() 方法， pop() 方法會從導航器堆棧上移除 Route 對象。

示例，在第二個路由頁面 SecondRoute 中，點選按鈕，退回到上一個路由頁面：

onPressed: () {
  Navigator.pop(context);
}
           

跳轉時傳參

假如我們需要在打開新路由時，傳遞參數給新路由，怎麼做呢？

方法就是：

1. 給新路由的構造函數，添加一個參數。
2. 在 Navigator.push 的時候，在建立新路由時，将要傳遞的資料，作為新路由構造函數的參數，傳遞過去即可。

示例：

這是第一個路由頁面，展示一個任務清單，當點選清單中的任務時，進入任務詳情（傳參過去）：

@override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          NowListItemVO vo = nowList[index];
          return new Card(
            child: new ListTile(
              title: new Text(vo.title),
              subtitle: new Text(vo.content),
              leading: new Icon(Icons.edit),
              trailing:  new Text((vo.complete * 100 / vo.total).toString() + "%"),
              onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => TaskDetailPage(nowListItemVO : vo))),

            ),
          );
        },

    );
  }
           

任務詳情路由：

class TaskDetailPage extends StatelessWidget {
  var nowListItemVO;

  TaskDetailPage({Key key, @required this.nowListItemVO}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("任務詳情"),

      ),
      body: Center(
        child: new Card(
            child: new ListTile(
              title: new Text(nowListItemVO.title),
              subtitle: new Text(nowListItemVO.content),
              leading: new Icon(Icons.edit),
              trailing:  new Text((nowListItemVO.complete * 100 / nowListItemVO.total).toString() + "%"),
            ),
        ),
      ),
    );
  }
}
           

**PS：更多精彩内容，請檢視 --> 《Flutter 開發》

**PS：更多精彩内容，請檢視 --> 《Flutter 開發》

**PS：更多精彩内容，請檢視 --> 《Flutter 開發》