flutter系列之:在flutter中使用導航Navigator

flydean發表於2023-02-20
Flutter

簡介

一個APP如果沒有頁面跳轉那麼是沒有靈魂的，頁面跳轉的一個常用說法就是Navigator,flutter作為一個最為優秀的前端框架，Navigator肯定是必不可少的，那麼在flutter中如何使用Navigator呢？

一起來看看吧。

flutter中的Navigator

Navigator是flutter中用來導航的關鍵元件。我們先來看下Navigator的定義:

class Navigator extends StatefulWidget

Navigator首先是一個StatefulWidget，為什麼是一個有狀態的widget呢？這是因為Navigator需要在內部報錯一些路由的資訊，事實上Navigator中儲存的就是一個棧結構的歷史訪問過的widget。

我們來看下它的建構函式，然後理解一下它內部的各個屬性的含義：

  const Navigator({
    Key? key,
    this.pages = const <Page<dynamic>>[],
    this.onPopPage,
    this.initialRoute,
    this.onGenerateInitialRoutes = Navigator.defaultGenerateInitialRoutes,
    this.onGenerateRoute,
    this.onUnknownRoute,
    this.transitionDelegate = const DefaultTransitionDelegate<dynamic>(),
    this.reportsRouteUpdateToEngine = false,
    this.observers = const <NavigatorObserver>[],
    this.restorationScopeId,
  })

在這些屬性中onGenerateRoute,pages,onGenerateInitialRoutes,transitionDelegate和observers這幾個引數必須是非null。

首先是pages，pages是一個List物件:

  final List<Page<dynamic>> pages;

這裡的pages儲存的就是歷史訪問資訊，Navigator的所有操作都是圍繞著pages來的。

如果我們想在page切換的過程中新增一些動畫，那麼就可以用到transitionDelegate，如果我們要彈出一些page的話，那麼可能會希望用到onPopPage callback方法來對pages list進行一些特殊處理。

另外initialRoute是需要第一個展示的route，Navigator還提供了兩個方法用來在生成Route的時候進行觸發：onGenerateRoute，onGenerateInitialRoutes。

Navigator提供了一系列的pop和push方法用來對路由進行跳轉。

下面我們將會透過一個具體的例子來對Navigator進行詳細的講解。

Navigator的使用

在這個例子中我們會使用Navigator的兩個最基本的方法push和pop來進行路由的切換。

先來看下push方法的定義：

  static Future<T?> push<T extends Object?>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
  }

push是一個靜態方法，這意味著我們可以透過使用Navigator.push來進行呼叫。

push方法需要傳入兩個引數，分別是context和route。

為什麼會有context呢？這是因為Navigator是和context相關聯的，不同的context可以有不同的Navigator。

Route就是要匯入的路由。

可以看到方法內部實際上是呼叫了Navigator.of方法，最後返回的是一個Future物件。

我們的例子是兩個圖片widget的簡單切換。點選一個影像widget會調整到另外一個影像widget上，在另外一個影像widget上點選，會跳轉回前一個widget。

我們可以這樣定義第一個widget：

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const SecondPage();
          }));
        },
        child: Image.network(
          'http://www.flydean.com/wp-content/uploads/2019/06/cropped-head5.jpg',
        ),
      ),
    );
  }

這裡的body我們放置了一個Image物件，然後在它的點選onTap操作時，呼叫了Navigator.push方法。

因為push方法需要一個Route物件，這裡我們使用了最簡單的MaterialPageRoute，然後返回第二個影像widget物件。

再來看看第二個影像Widget的定義：

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network(
            'https://img-blog.csdnimg.cn/bb5b19255ab6406cb6bdc467ecc40462.webp',
          ),
        ),
      ),
    );
  }
}

和第一個影像widget一樣，它的body也是一個image,然後在點選ontap方法中跳回到第一個圖片widget去。

這裡的跳回方法使用的是 Navigator.pop，我們來看下pop方法的實現：

  static void pop<T extends Object?>(BuildContext context, [ T? result ]) {
    Navigator.of(context).pop<T>(result);
  }

和push一樣，pop方法也接收一個context物件，但是它還有一個可選的result引數。最後實際呼叫的是Navigator.of(context).pop方法。

result是做什麼的呢？

還記得push方法嗎？push方法會返回一個Future，也就是說push方法是有結果的，這個結果是從哪裡來的呢？這個結果就是pop時候傳進來的。

當我們呼叫push方法的時候，就會把這個result放在Future中返回。

執行上面的程式碼，首先我們得到第一個頁面的widget：

點選就會調整到第二個圖片widget:

再次點選就會跳回第一個頁面，非常的神奇。

總結

Navigator是每個flutter app都少不了的元件，希望大家能夠掌握。

本文的例子：https://github.com/ddean2009/learn-flutter.git

相關文章