flutter系列之:在flutter中使用導(dǎo)航Navigator

簡介
一個(gè)APP如果沒有頁面跳轉(zhuǎn)那么是沒有靈魂的，頁面跳轉(zhuǎn)的一個(gè)常用說法就是Navigator,flutter作為一個(gè)最為優(yōu)秀的前端框架，Navigator肯定是必不可少的，那么在flutter中如何使用Navigator呢？

一起來看看吧。

flutter中的Navigator
Navigator是flutter中用來導(dǎo)航的關(guān)鍵組件。我們先來看下Navigator的定義:

class Navigator extends StatefulWidget
Navigator首先是一個(gè)StatefulWidget，為什么是一個(gè)有狀態(tài)的widget呢？這是因?yàn)镹avigator需要在內(nèi)部報(bào)錯(cuò)一些路由的信息，事實(shí)上Navigator中保存的就是一個(gè)棧結(jié)構(gòu)的歷史訪問過的widget。

我們來看下它的構(gòu)造函數(shù)，然后理解一下它內(nèi)部的各個(gè)屬性的含義：

  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這幾個(gè)參數(shù)必須是非null。

首先是pages，pages是一個(gè)List對(duì)象:

  final List<Page<dynamic>> pages;
這里的pages存儲(chǔ)的就是歷史訪問信息，Navigator的所有操作都是圍繞著pages來的。

如果我們想在page切換的過程中添加一些動(dòng)畫，那么就可以用到transitionDelegate，如果我們要彈出一些page的話，那么可能會(huì)希望用到onPopPage callback方法來對(duì)pages list進(jìn)行一些特殊處理。

另外initialRoute是需要第一個(gè)展示的route，Navigator還提供了兩個(gè)方法用來在生成Route的時(shí)候進(jìn)行觸發(fā)：onGenerateRoute，onGenerateInitialRoutes。

Navigator提供了一系列的pop和push方法用來對(duì)路由進(jìn)行跳轉(zhuǎn)。

下面我們將會(huì)通過一個(gè)具體的例子來對(duì)Navigator進(jìn)行詳細(xì)的講解。

Navigator的使用
在這個(gè)例子中我們會(huì)使用Navigator的兩個(gè)最基本的方法push和pop來進(jìn)行路由的切換。

先來看下push方法的定義：

  static Future<T?> push<T extends Object?>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
  }
push是一個(gè)靜態(tài)方法，這意味著我們可以通過使用Navigator.push來進(jìn)行調(diào)用。

push方法需要傳入兩個(gè)參數(shù)，分別是context和route。

為什么會(huì)有context呢？這是因?yàn)镹avigator是和context相關(guān)聯(lián)的，不同的context可以有不同的Navigator。

Route就是要導(dǎo)入的路由。

可以看到方法內(nèi)部實(shí)際上是調(diào)用了Navigator.of方法，最后返回的是一個(gè)Future對(duì)象。

我們的例子是兩個(gè)圖片widget的簡單切換。點(diǎn)擊一個(gè)圖像widget會(huì)調(diào)整到另外一個(gè)圖像widget上，在另外一個(gè)圖像widget上點(diǎn)擊，會(huì)跳轉(zhuǎn)回前一個(gè)widget。

我們可以這樣定義第一個(gè)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我們放置了一個(gè)Image對(duì)象，然后在它的點(diǎn)擊onTap操作時(shí)，調(diào)用了Navigator.push方法。

因?yàn)閜ush方法需要一個(gè)Route對(duì)象，這里我們使用了最簡單的MaterialPageRoute，然后返回第二個(gè)圖像widget對(duì)象。

再來看看第二個(gè)圖像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',
          ),
        ),
      ),
    );
  }
}
和第一個(gè)圖像widget一樣，它的body也是一個(gè)image,然后在點(diǎn)擊ontap方法中跳回到第一個(gè)圖片widget去。

這里的跳回方法使用的是 Navigator.pop，我們來看下pop方法的實(shí)現(xiàn)：

  static void pop<T extends Object?>(BuildContext context, [ T? result ]) {
    Navigator.of(context).pop<T>(result);
  }
和push一樣，pop方法也接收一個(gè)context對(duì)象，但是它還有一個(gè)可選的result參數(shù)。最后實(shí)際調(diào)用的是Navigator.of(context).pop方法。

result是做什么的呢？

還記得push方法嗎？push方法會(huì)返回一個(gè)Future，也就是說push方法是有結(jié)果的，這個(gè)結(jié)果是從哪里來的呢？這個(gè)結(jié)果就是pop時(shí)候傳進(jìn)來的。

當(dāng)我們調(diào)用push方法的時(shí)候，就會(huì)把這個(gè)result放在Future中返回。

運(yùn)行上面的代碼，首先我們得到第一個(gè)頁面的widget：

點(diǎn)擊就會(huì)調(diào)整到第二個(gè)圖片widget:

再次點(diǎn)擊就會(huì)跳回第一個(gè)頁面，非常的神奇。

總結(jié)
Navigator是每個(gè)flutter app都少不了的組件，希望大家能夠掌握。

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

作者：程序那些事


歡迎關(guān)注微信公眾號(hào) ：程序那些事