Flutter - 使用 push(), pop() 和路由進行導航

在 Web/Mobile 應用程式中，導航是一個很重要的特性，因為它允許你從一個頁面跳轉到另一個頁面。

在 flutter 應用程式中，我們可以使用 push(), pop() 方法實現導航，或者編寫我們自己的路由。

準備工作

我們假設 FirstScreen 和 SecondScreen 是兩個不同的類，分別在各自的 FirstScreen.dart 和 SecondScreen.dart 檔案內。

FirstScreen.dart 檔案如下：

```dart import 'package:flutter/material.dart'; import 'package:navigation/SecondScreen.dart';

class FirstScreen extends StatefulWidget { @override _FirstScreenState createState() => _FirstScreenState(); }

class _FirstScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("First Screen"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "Hello to First Screen", style: TextStyle( fontSize: 20, ), ), SizedBox( height: 10, ), Center( child: RaisedButton( onPressed: () {}, child: Text( "First Screen", style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold ), ), ), ), ], ), ); } } ```

SecondScreen.dart 檔案如下：

```dart import 'package:flutter/material.dart';

class SecondScreen extends StatefulWidget { @override _SecondScreenState createState() => _SecondScreenState(); }

class _SecondScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Screen"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "Welcome on Second Screen", style: TextStyle( fontSize: 20, ), ), SizedBox( height: 10, ), Center( child: RaisedButton( onPressed: () {}, child: Text( "Second Screen", style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold ), ), ), ), ], ), ); } } ```

main.dart 的內容如下：

```dart import 'package:flutter/material.dart'; import 'package:navigation/FirstScreen.dart';

void main() { runApp(MaterialApp( home: FirstScreen())); } ```

第一種導航方式

我們可以使用 Navigator.push() 方法和 Navigator.pop() 方法進行頁面/螢幕導航。

為了觸發 RaisedButton 事件後從 FirstScreen 導航到 SecondScreen。我們需要在 FirstScreen 的 build() 方法裡面的 RaisedButton 中 onPressed(){} 新增如下的事件：

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

Navigator.push() 方法將給定的路由推送到路由棧中，這個路由是由 Navigator 類來維護。

現在，我們可以使用 MaterialPageRoute路由 或者我們可以建立自己的路由。

將一個新的路由新增到棧中，我們可以通過一個 builder 函式建立一個 MaterialPageRoute 的例項。builder 函式可以建立我們想在頁面中展示的掛件。

(context) => SecondScreen() 指向 SecondSreen 上下文。

為了通過 RaisedButton 點選事件，從 SecondScreen 返回到 FirstScreen 頁面：我們需要在 SecondScreen 頁面中新增如下的內容：

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

這裡的 pop() 方法是將導航棧中最新的路由彈出。

第二種導航方式

通過 MaterialApp 建構函式額外提供的屬性：initialRoute 和 routes。

```dart import 'package:flutter/material.dart' import 'package:navigation/FirstScreen.dart' import 'package:navigation/SecondScreen.dart'

void main() { runApp(MaterialApp( initialRoute: '/firstScreen', routes: { '/firstScreen': (context) => FirstScreen(), '/secondScreen': (context) => SecondScreen(), }, home: FirstScreen(), )); } ```

initialRoute 屬性定義應用應該從哪個路由開始。routes 屬性定義有哪些路由是可以獲取的，且路由導航到哪些掛件。

這裡，當路由導航到 /firstScreen 時，FirstScreen 掛件將構建。

現在，我們將 FirstScreen 的 onPressed(){} 的方法更改如下：

dart onPressed: () { Navigator.pushNamed(context, '/secondScreen'); }

這裡使用命名路由 Navigator.pushNamed() 導航到第一個頁面。

在 SecondScreen 的 onPressed(){} 事件中，還是保留使用 Navigator.pop() 方法：

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

本文是譯文，採用意譯。原文連結 https://faun.pub/flutter-navigation-using-push-pop-and-routes-d49988098efe