【Flutter 問題系列第 67 篇】在 Flutter 中使用 Get 插件在 Dialog 彈窗中不能二次跳轉路由問題的解决方案

這是【Flutter 問題系列第 67 篇】，如果覺得有用的話，歡迎關注專欄。

博文所用 Flutter SDK：2.2.3，Dart SDK：2.13.4，get: 4.3.8。

一：問題描述

之前偶然間發現的一個問題，特此記錄下。

上架小米商店的時候，被反饋在用戶首次進入應用時要有隱私協議的彈窗，然後就給加了一個，點擊《用戶協議》時也能正常跳轉到相應的 Web 頁，以為這樣就大功告成了，如下圖所示

自己偶然間在測試的時候，當我在彈窗首次彈出後，第一次點擊鏈接可以正常跳轉，退出 Web 頁再次點擊時卻沒有任何反應，這是為什麼呢？

斷點調試了下，發現了問題的根本所在。

二：解决方案

設置 Get.toNamed() 方法的屬性 preventDuplicates 為 false 即可，如下代碼所示

  /// 跳轉到《用戶協議》網頁
  void _toAgreementPage() {
    
    Get.toNamed(
      AppRoutes.WEB,
      arguments: WebModel(title: "《用戶協議》", url: agreementUrl, isLocal: false),
      preventDuplicates: false, // “防止重複”設置為 false
    );
  }

然後問題得到解决，這個不僅針對 Dialog，也適合 Snackbar、BottomSheet 等方式。

三：源碼分析之《如何解决 Dialog 彈窗二次跳轉路由异常的問題》

有些同學喜歡打破沙鍋問到底，想知道問題是解决了，但是為什麼呢？那咱就源碼分析走起。

首先通過斷點調試來看下 Get.toNamed() 方法的源碼，如下圖所示

由圖可知，toNamed() 方法上方注釋的意思是

• 默認情况下，GetX 會阻止跳轉到已經進入的路由。
• 如果你想解除這個限制，設置屬性 preventDuplicates 為 false 即可。

由斷點的比特置可知，此時 preventDuplicates 為 true，又能進入到此判斷，說明 page == currentRoute 條件也成立，也就是說當前要跳轉的是已經進入的路由。

方法返回了 null ，所以在 Dialog 中再次點擊鏈接跳轉 Web 頁的時候沒有任何的反應。

我們只需要設置 preventDuplicates 為 false，條件不成立了，自然進入到了後面的判斷。

四：源碼分析之《為什麼在頁面中沒有這個問題在 Dialog 彈窗中卻有》

一：當路由進棧時

我們先來看一個類 GetObserver ，該類繼承自 NavigatorObserver 類，作用是監聽頁面跳轉。像平常用到的 Toast 等也都會繼承這個類， GetObserver 類的源碼如下圖所示

當我點擊《用戶協議》鏈接跳轉到 Web 頁的時候，由紅色方框選中部分可知，只有 PageRoute 類型的才允許修改當前路由 current 字段的值，所以此時會更新。

這也是為什麼從 Dialog 彈窗進入到新頁面的時候沒什麼問題。

二：當路由出棧時

如下圖所示

當我點擊 Web 頁的返回按鈕退出當前頁面時，由紅色方框選中部分可知，只有 PageRoute 類型的才允許修改當前路由 current 字段的值，而我們是從 Dialog 彈窗進入的，上一個頁面的類型是 GetDialogRoute，不滿足更新 current 的條件。

所以雖然我們的確是退出了 Web 頁，但此時 current 的值並沒有被更新，還是 /web，也就是眼睛看到的是彈窗，但程序認為你在 Web 頁，這就造成了同個頁面無法跳轉的問題。

至此，關於在 Flutter 中使用 Get 插件在 Dialog 彈窗中不能二次跳轉路由的問題，便介紹到這裏。

最後放一張 get 對當前路由類型判斷的類，如下圖所示

由圖可知

• Dialog 類型是 GetDialogRoute，繼承自 PopupRoute。
• Snackbar 類型是 SnackRoute，繼承自 OverlayRoute。
• BottomSheet 類型是 GetModalBottomSheetRoute，繼承自 PopupRoute。
• Page 類型是GetPageRoute，繼承自 PageRoute。

你的問題得到解决了嗎？歡迎在評論區留言。

贈人玫瑰，手有餘香，如果覺得文章不錯，希望可以給個一鍵三連，感謝。

---

結束語

Google 的 Flutter 越來越火，截止 2022年6月10日 GitHub 標星已達 142K，Flutter 毅然是一種趨勢，所以作為前端開發者，沒有理由不趁早去學習。

無論你是 Flutter 新手還是已經入門了，不妨先點個關注，後續我會將 Flutter 中的常用組件（含有源碼分析、組件的用法及注意事項）以及可能遇到的問題寫到 CSDN 博客中，希望自己學習的同時，也可以幫助更多的人。