主頁 > 後端開發 > 【Flutter 實戰】路由堆疊詳解

【Flutter 實戰】路由堆疊詳解

2020-09-16 10:07:00 後端開發

老孟導讀:Flutter中路由是非常重要的部分,任何一個應用程式都離不開路由管理,此文講解路由相關方法的使用和路由堆疊的變化,

Flutter 路由管理中有兩個非常重要的概念:

  • Route:路由是應用程式頁面的抽象,對應 Android 中 Activity 和 iOS 中的 ViewController,由 Navigator 管理,
  • Navigator:Navigator 是一個組件,管理和維護一個基于堆疊的歷史記錄,通過 push 和 pop 進行頁面的跳轉,

push 和 pop

假設現在有2個頁面 A 和 B,A中有一個按鈕,點擊跳轉到 B 頁面,A 頁面代碼:

class APage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: RaisedButton(
        child: Text('A 頁面'),
        onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(builder: (context) {
            return BPage();
          }));
        },
      ),
    );
  }
}

B 頁面代碼:

class BPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: RaisedButton(
          child: Text('B 頁面'),
          onPressed: () {

          },
        ),
      ),
    );
  }
}

當應用程式位于A頁面時,路由堆疊中只有A,點擊按鈕跳轉到B頁面,路由堆疊中有 B 和 A,且 B 處于堆疊頂,

點擊 B 頁面的按鈕回傳到 A 頁面,修改 B 頁面按鈕點擊事件:

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
    Navigator.of(context).pop();
  },
)

路由堆疊的變化:

上面案例的效果是從 B 頁面跳轉到 A 頁面,那是否也可以使用 push 方法?修改 B 頁面按鈕點擊事件:

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return APage();
    }));
  },
)

從效果上看也可以跳轉到 A 頁面,路由堆疊:

那是否可以使用 push 代替 pop 呢? 答案肯定是不可以的,

  1. 試想如下場景,進入購物App,展示購物串列,點擊其中一個進入商品詳細頁面,使用 push 再次進入購物串列,然后在進入商品詳細頁面...,如此反復,路由堆疊中將會存放大量的購物串列和商品詳細頁面的路由,點擊回傳按鈕,會將反復顯示購物串列和商品詳細頁面,
  2. 頁面切換時路由影片 push 和 pop 是不同,

maybePop 和 canPop

上面案例如果點擊 A 頁面按鈕直接呼叫 pop 會如何?

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).pop();
  },
)

在 A 頁面時路由堆疊中只有 A,呼叫 pop 后,路由堆疊變化:

此時路由堆疊為空,沒有可顯示的頁面,應用程式將會退出或者黑屏,好的用戶體驗不應如此,此時可以使用 maybePop,maybePop 只在路由堆疊有可彈出路由時才會彈出路由,

上面的案例在 A 頁面執行maybePop:

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).maybePop();
  },
)

點擊后不會出現彈出路由,因為當前路由堆疊中只有 A,在 B頁面執行maybePop,將會回傳到 A 頁面,

也可以通過 canPop 判斷當前是否可以 pop:

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
    if(Navigator.of(context).canPop()){
      Navigator.of(context).pop();
    }
  },
)

pushNamed

pushNamed 是命名路由的方式,需要在 MaterialApp 中配置路由名稱:

MaterialApp(
      title: 'Flutter Demo',
      routes: <String, WidgetBuilder>{
        '/A': (context) => APage(),
        '/B': (context) => BPage(),
      },
      home: Scaffold(
        body: APage(),
      ),
    )

從 A 跳轉到 B:

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).pushNamed('/B');
  },
)

pushReplacementNamed 和 popAndPushNamed

有A、B、C 三個頁面,A頁面通過 pushNamed 跳轉到 B:

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).pushNamed('/B');
  },
)

B 通過 pushReplacementNamed 跳轉到 C:

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
      Navigator.of(context).pushReplacementNamed('/C');
  },
)

點擊 C 頁面按鈕執行 pop:

RaisedButton(
  child: Text('C 頁面'),
  onPressed: () {
    if(Navigator.of(context).canPop()){
      Navigator.of(context).pop();
    }
  },
)

點擊 C 頁面按鈕直接回傳到了 A 頁面,而不是 B 頁面,因為 B 頁面使用 pushReplacementNamed 跳轉,路由堆疊變化:

B 頁面跳轉到 C 頁面,使用 popAndPushNamed:

RaisedButton(
  child: Text('B 頁面'),
  onPressed: () {
      Navigator.of(context).popAndPushNamed('/C');
  },
)

popAndPushNamed 路由堆疊和 pushReplacementNamed 是一樣,唯一的區別就是 popAndPushNamed 有 B 頁面退出影片,

popAndPushNamed 和 pushReplacementNamed 使當前頁面不在路由堆疊中,所以通過 pop 無法回傳此頁面,

適用場景:

  • 歡迎頁面:應用程式打開后首先進入歡迎界面,然后進入首頁,進入首頁后不應該再進入歡迎界面,
  • 登錄頁面:登錄成功后進入相關頁面,此時按回傳按鈕,不應再進入登錄頁面,

pushNamedAndRemoveUntil

有如下場景,應用程式進入首頁,點擊登錄進入登錄頁面,然后進入注冊頁面或者忘記密碼頁面...,登錄成功后進入其他頁面,此時不希望回傳到登錄相關頁面,此場景可以使用 pushNamedAndRemoveUntil,

有A、B、C、D 四個頁面,A 通過push進入 B 頁面,B 通過push進入 C 頁面,C 通過 pushNamedAndRemoveUntil 進入 D 頁面同時洗掉路由堆疊中直到 /B 的路由,C 頁面代碼:

RaisedButton(
  child: Text('C 頁面'),
  onPressed: () {
    Navigator.of(context).pushNamedAndRemoveUntil('/D', ModalRoute.withName('/B'));
  },
),

D 頁面按鈕執行 pop:

RaisedButton(
  child: Text('D 頁面'),
  onPressed: () {
    Navigator.of(context).pop();
  },
)

從 C 頁面跳轉到 D 頁面路由堆疊變化:

Navigator.of(context).pushNamedAndRemoveUntil('/D', ModalRoute.withName('/B'));

表示跳轉到 D 頁面,同時洗掉D 到 B 直接所有的路由,如果洗掉所有路由,只保存 D:

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

路由堆疊變化:

popUntil

有如下場景,在入職新公司的時候,需要填寫各種資訊,這些資訊分為不同部分,比如基本資訊、作業資訊、家庭資訊等,這些不同模塊在不同頁面,填寫資訊時可以回傳上一頁,也可以取消,取消回傳到首頁,此場景可以使用 popUntil,一直 pop 到指定的頁面,

有A、B、C、D 四個頁面,D 頁面通過 popUntil 一直回傳到 A 頁面,D 頁面代碼:

RaisedButton(
  child: Text('D 頁面'),
  onPressed: () {
    Navigator.of(context).popUntil(ModalRoute.withName('/A'));
  },
)

路由堆疊變化:

傳遞資料

有如下場景,商品串列頁面,點擊跳轉到商品詳情頁面,商品詳情頁面需要商品的唯一id或者商品詳情資料,有兩種方式傳遞資料:

第一種:通過建構式方式:

class ProductDetail extends StatelessWidget {
  final ProductInfo productInfo;

  const ProductDetail({Key key, this.productInfo}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

跳轉代碼:

Navigator.of(context).push(MaterialPageRoute(builder: (context){
  return ProductDetail(productInfo: productInfo,);
}));

此種方式無法用于命名路由的跳轉方式,

第二種:通過命名路由設定引數的方式:

A 頁面傳遞資料,

RaisedButton(
  child: Text('A 頁面'),
  onPressed: () {
    Navigator.of(context).pushNamed('/B',arguments: '來自A');
  },
)

B 頁面通過 ModalRoute.of(context).settings.arguments 接收資料:

RaisedButton(
  child: Text('${ModalRoute.of(context).settings.arguments}'),
  onPressed: () {
    Navigator.of(context).pushNamed('/C');
  },
)

回傳資料

B 頁面回傳代碼:

RaisedButton(
  child: Text('${ModalRoute.of(context).settings.arguments}'),
  onPressed: () {
    Navigator.of(context).pop('從B回傳');
  },
)

A 頁面接識訓傳的資料:

class APage extends StatefulWidget {
  @override
  _APageState createState() => _APageState();
}

class _APageState extends State<APage> {
  String _string = 'A 頁面';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: RaisedButton(
          child: Text(_string),
          onPressed: () async {
            var result =
                await Navigator.of(context).pushNamed('/B', arguments: '來自A');
            setState(() {
              _string = result;
            });
          },
        ),
      ),
    );
  }
}

push 相關方法回傳 Future 型別,使用 await 等待回傳結果,

交流

交流

老孟Flutter博客(330個控制元件用法+實戰入門系列文章):http://laomengit.com

歡迎加入Flutter交流群(微信:laomengit)、關注公眾號【老孟Flutter】:

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/56132.html

標籤:Dart

上一篇:學習第27天

下一篇:你還在用 BeanUtils?試試 MapStruct,優雅的物件轉換解決方案!

標籤雲
其他(123570) Java(13369) Python(12729) C(7542) 區塊鏈(7372) JavaScript(7054) 基礎類(6313) AI(6244) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4120) MySQL(4012) Linux(3394) C語言(3288) C++語言(3117) Java相關(2746) 疑難問題(2699) 單片機工控(2479) Web開發(1951) 網絡通信(1793) 數據庫相關(1767) VB基礎類(1755) PHP(1727) 開發(1646) 系統維護與使用區(1617) .NETCore(1586) 基礎和管理(1579) JavaEE(1566) C++(1527) 專題技術討論區(1515) Windows客戶端使用(1484) HtmlCss(1466) ASP.NET(1428) Unity3D(1354) VCL組件開發及應用(1353) HTML(CSS)(1220) 其他技術討論專區(1200) WindowsServer(1192) .NET技术(1165) 交換及路由技術(1149) 語言基礎算法系統設計(1133) WindowsSDKAPI(1124) 界面(1088) JavaSE(1075) Qt(1074) VBA(1048) 新手樂園(1016) 其他開發語言(947) Go(907) HTML5(901) 新技術前沿(898) 硬件設計(872) 區塊鏈技術(860) 網絡編程(857) 非技術版(846) 一般軟件使用(839) 網絡協議與配置(835) Eclipse(790) Spark(750) 下載資源懸賞專區(743)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • 在C#中,如何為Praxedo業務事件附件管理器創建SOAP集成?

    我們使用 Praxedo,需要將其與我們的其他解決方案集成。他們的 API 需要使用 SOAP,而且還需要 MTOM 和基本身份驗證。我們已經成功地與多種服務集成,例如他們的客戶經理。在客戶...

    uj5u.com 2021-10-16 15:47:18 more
  • Weblogic14c-webservice-description-name在weblogic-webservice

    我使用以下注釋將我的無狀態 ejb 公開為 Web 服務:@WebService( name = "MyServicePort", portName = "MyServicePort", serviceName = "MyService",)@SOAPBinding(...

    uj5u.com 2021-10-16 15:45:15 more
  • 如何在docker環境中安裝yarn?

    現在,我正在嘗試在 docker 上為 Ruby on rails 創建環境。我閱讀了一些人撰寫并嘗試過的檔案和一些博客。但是我遇到了錯誤并且無法完成。好像我必須在docker環境中安裝yarn,...

    uj5u.com 2021-10-16 15:40:43 more
  • 如何查詢按日期過濾的活動記錄?

    如何從我的資料庫中選擇僅在 5 月份處于活動狀態的所有學生學生?我在活動記錄檔案中找不到它。我只設法查詢了 5 月份創建的學生,而不是所有學生都激活了....Student.where(st...

    uj5u.com 2021-10-16 15:39:52 more
  • 選擇一個Gradle任務,以便每次運行測驗

    當我第一次運行測驗(方法)時,我有這個選單
    但是如果我從當前選單再次運行這個測驗(第二次或更多次),它將運行我最近運行的任務。所以我需要幫助,如何配置IntelliJ Idea,使IDEA總是...

    uj5u.com 2021-10-16 15:29:58 more
  • cypress上的invoke()方法如果呼叫兩次就不作業了

    我是Cypress的新手,我想用一個已經存在的網頁來實作一些簡單的測驗。我對結果有點困惑,因為我呼叫了兩次invoke():第一次是檢查初始值(0%),第二次是設定一個新的值并檢查變化,但是...

    uj5u.com 2021-10-16 15:28:48 more
  • 用jest和testing-library測驗組件內的一個函式

    我是testing-library和jest的新手,我想測驗組件內部的一個函式,它能改變一個輸入的值。這個組件是一個表單,它的另一個組件是一個輸入。
    export const Form=() => {
    const [n...

    uj5u.com 2021-10-16 15:28:44 more
  • TypeScript通用型將所有的特定型別改為另一種型別

    我試圖想出一種型別,即接受一個物件并將所有型別為number的鍵設定為string。 下面的方法不起作用:...

    uj5u.com 2021-10-16 12:36:47 more
  • 當庫存數量為0時,Recyclerview專案顯示空位

    當我從回應中得到庫存數量為0時,產品不顯示,但產品位置在網格回收器視圖kotlin中顯示空位。我將整個串列傳入配接器,然后通過庫存數量過濾。
    class ProductListAdapter(
    va...

    uj5u.com 2021-10-16 12:36:15 more
  • Android-從另一個片段內的回收器視圖呼叫片段

    我有一個應用程式(Java),原來有5個部分。所有這些都是片段,它們由底部導航中的5個圖示訪問。然而,其中一個部分(Lessons)現在被一個不同的片段所取代,該片段包含一個回收器視圖。在...

    uj5u.com 2021-10-16 12:35:50 more