Flutter(二十五)——路由棧

前言

在前面,我們介紹了動態路由,靜態路由以及路由的傳參,博主也提到過“路由棧”的基本概念。但在實際項目中,路由的控制方法並不僅僅只有這些,這是因爲實際情況更加的複雜多變,所以這一篇博主,博主將深入地講解路由棧的知識

路由棧的詳解

前面介紹,一個路由是用過push(或者pushNamed)方法之後,進行跳轉界面的,而出棧我們通過pop方法出棧,它的原理圖下圖所示:
在這裏插入圖片描述如上圖所示,當我們從page1跳轉到界面page2的時候,就是往堆棧的頂端插入這個頁面,因爲堆棧只有一個出口,所以回到page1界面的時候,就需要把頂部的page2頁面移除堆棧。

因爲,我們得出了這樣一個結論:在Flutter開發中,Navigator裏的push方法把元素添加到堆棧的頂部,而pop方法則刪除了頂部的元素。

在Android裏面,Android啓動模式有4種,即standard,singleTop,singleTask,singleInstance,通過intent跳轉之後,他們的Activity棧是不是一樣的呢?其實push,pop與Android裏的standard啓動模式類似,在Flutter開發中,也考慮到了類似Android的各種啓動模式的實現,下面我們來一一講解。

pushReplancementNamed方法

假設現在路由棧中有3個page,現在我們需要跳轉到page4頁面。這一次我們不通過page3直接push,而是調用另一個方法pushReplacementNamed,代碼如下:

Navigator.of(context).pushReplacementNamed('/page4');

這是時候路由棧的圖,應該如下圖所示:
在這裏插入圖片描述由於我們調用了pushReplacementNamed方法,這個方法就是替換的意思,執行完pushReplacementNamed方法後,page3就沒有了。如果這個時候執行pop方法,則路由棧就只會剩下page1和page2。

popAndPushNamed方法

與pushReplacementNamed方法類似的還有popAndPushNamed方法,其執行結果棧是的路由棧與pushReplacementNamed方法的效果是一致的。不同的是,page3會同時有pop的轉場效果和從page2頁push的轉場效果。也就是說調用了popAndPushNamed方法,轉換頁面就有了動畫效果。

從交互體驗上來說,popAndPushNamed有pop的效果,是一種選擇並攜帶選擇結果返回的效果。

pushNamedAndRemoveUntil方法

在App裏,有一個普遍存在的場景,即打開一個App之後,會出現App的啓動頁,然後進入歡迎頁面,最後纔是首頁。在這種情況下,用戶選擇返回,是應該從首頁退出App的,而不是再次倒退到歡迎頁和啓動頁。這個時候,pushNamedAndRemoveUntil方法就派上用場了。我們可以通過以下的方式調用,讓整個路由棧裏只存在一個界面,調用代碼如下:

Navigator.of(context).pushNamedAndRemoveUntil('/homepage',(Route<dynamic> route)=>false);

其中(Route route)=>false能確保刪除之前所有路由棧中的頁面,實現的效果圖如下:
在這裏插入圖片描述除了這種首頁歡迎圖的界面跳轉情況外,我們還有一種跳轉情況,比如從page1一次跳轉到page5後,在pop時,我想直接回到page2怎麼辦?其實我們改變以下上面的代碼就行,代碼如下:

Navigator.of(context).pushNamedAndRemoveUntil('/page5',ModalRoute.withName('/page2'));

這段代碼實現的效果如下圖所示:
在這裏插入圖片描述

popUntil方法

popUntil和上面說的pushNamedAndRemoveUntil的第二種用法類似,只不過沒有push操作,而是直接pop到指定界面,我們來看以下其調用的代碼:

Navigator.popUntil(context,ModalRoute.withName('/page2'));

這段代碼實現的效果如下圖所示:
在這裏插入圖片描述路由棧的各種Flutter官方提供給我們的方法我們今天就講解到這裏,下一篇博文講解自定義路由的相關知識。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章