Flutter之Navigator解讀

簡述

本文適合對Flutter已經有簡單瞭解的初學者

官網之Navigator

官網洋洋灑灑的寫了好長一頁, 對於初學者十分的不友好,小編的英文水平可能還停留在nice to meet your 的地步.這個欄目我打算省略...可是我勝在有谷歌翻譯(真沒在打廣告)

我仍是簡單粗略的解讀(翻譯)一下,在說Navigator以前是咱們先簡單說一下Flutter中的Router的概念

Router

路由是對屏幕界面的抽象。例如，'/home'將帶您進入首頁, '/login'將您帶到登錄頁。 簡單說每個界面都對應相應的 Page. 咱們能夠把Router當作一個班級. 每個學生都是註冊在這個班級上的的人, 經過老師點名, 叫出這個學生, 或者經過老師經過不點名, 經過親手抓的方式, 把學生叫出來 在些次Flutter demo應用程序中咱們聲明幾個個路由

MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    routes: <String, WidgetBuilder> {
        '/xiaoming': (_) => new XiaoMingPage(),
        '/lili': (_) => new LiLiPage(),
    },
);
複製代碼

Router的管理

有了學生, 就會涉及學生的管理, 否則每一個學生毫無規矩, 整個班級就會很混亂. 有的學生想作在第一排, 有的學生想坐在最後一排, 整個教室將會成爲一鍋粥 .這個時候咱們今天的主角Navigator就能夠登場了.

Navigator

Navigator用來管理堆棧功能（即push和pop）

若是你對堆棧有基本的瞭解，那麼你就知道push和pop, push 是將元素添加到堆棧的頂部，pop是從同一堆棧中刪除頂部元素。

所以，在Flutter的狀況下，當咱們導航到另外一個屏幕時，咱們使用Navigator.push方法將新屏幕添加到堆棧的頂部。固然，這些pop方法會從堆棧中刪除該屏幕。 在此，讓咱們以上圖爲例，讓咱們看看如何從屏幕1移動到屏幕2.

初始狀態:

點擊 小明滾出來 進行push小明的界面入棧

點擊頂部回退按鈕或者android的返回按鍵, flutter會默認調取flutter.pop方法, 將 小明界面 彈出

點擊 小麗滾出來 進入push小麗的界面入棧

這就是整個上圖棧操做的全過程

總結

其實我還沒寫完

寫到這裏, 你們可能以爲小編說的, 某度一抓一把. 沒什麼乾貨, 小編寫出來純是混臉熟, 那麼接下來乾貨來了.

我查看了好多份相關文章, 基本上講講 push方法 pushName方法這個文章就結束了. 可是flutter的NB之處並非這二個方法就能夠展現的.

靜態方法

如下是Navigator的官網靜態方法, 接下來我將講解其中重點部分.

maybePop

若是你在應用首頁(堆棧只有一個元素)直接彈出堆棧中惟一的界面, 恭喜你,明天能夠去財務結算了.爲了不發生這種問題,咱們能夠調用maybePop()方法。這個方法, 是能夠試着彈彈,彈不走拉倒的方法.

效果測試:

這是gif中, 最終的幾個按鈕的按鈕的代碼

// 試試而後成功反回
RaisedButton(
    onPressed: () {
        Navigator.maybePop(context);
    },
    child: Text("棧中測試試maybePop"),
),
// 試試,發現本身是棧裏惟一的元素, 放棄pop
RaisedButton(
    onPressed: () {
        Navigator.maybePop(context);
    },
    child: Text("棧首測試試maybePop"),
),
// 直接退, 而後掛了
RaisedButton(
    onPressed: () {
        Navigator.pop(context);
    },
    child: Text("直接pop()"),
),
複製代碼

canPop

我把canPop放到maybePop以後去講. 是由於他很簡單(其實我是懶得作demo圖). canPop只有在棧中只有一個元素的時候返回 false, 其它都是 true.

maybePop能夠理解成

Navigator.canPop(context) ? Navigator.pop(context): null;
複製代碼

push和pushNamed

push與pushNames運行效果相同,只是接口的調用方式不一樣, 都是將一個界面壓入棧中. 區別在於, push是親手把界面扔入棧中, 而pushNames則是經過點名的方式經過router讓界面本身進入棧中.

// push的調用方法
Navigator.push(context,  new MaterialPageRoute(
    builder: (context)  {
      return Scaffold(
        appBar: AppBar(
          title: Text('我是新的界面'),
        )
      );
    }
));

// pushNamed的調用方法
// 先在Router上定義Page;
routes: <String, WidgetBuilder> {
    '/xiaoming': (_) => new XiaoMingPage(),
}
...
Navigator.pushNamed(context, '/XiaoMingPage');
複製代碼

pushReplacement 和 pushReplacementNamed

同上, 兩者都是用來替代當前棧中棧頂元素. 只是接口的調用方式不一樣. 這點很少說了.效果具體看demo, 在二界測試頁點擊按鈕後. 跳轉到新界面, 再次點擊反回, 咱們回到了首頁

pushAndRemoveUntil 和 pushNamedAndRemoveUntil

當咱們構建一個很複雜的應用，用戶登陸，滾動, 查看各類信息...用戶想註銷並回到首頁，你不能只是簡單地push一個首頁, 在這樣的狀況下, 您應該刪除堆棧中的全部路由，以便用戶在註銷後沒法返回到先前的界面. 官方的Demo中的方法, 回到棧底, 併入棧一個 MyHomePage.

// flutter sample
void _finishAccountCreation() {
  Navigator.pushAndRemoveUntil(
    context,
    MaterialPageRoute(builder: (BuildContext context) => MyHomePage()),
    ModalRoute.withName('/'),
  );
}
複製代碼

popUntil

當咱們構建一個多表單建立的場景，一個用戶須要按次序在不一樣 Page 填寫不一樣的表單, 當用戶填寫至的第三頁時，用戶決定取消填寫表單, 咱們指望的邏輯是, 回到填寫表單以前的某一頁。

Navigator.popUntil(context, ModalRoute.withName('/Dashboard'));
複製代碼

未完待補充

筆者也是一名初學者. 若有不正確的地方,歡迎指責批判, 筆者 也會隨着更深刻的瞭解發現, 完善這份文章.

Demo Code