欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter開發(fā)中的路由參數(shù)處理

 更新時間:2021年06月17日 16:11:07   作者:島上碼農(nóng)  
在實際開發(fā)中,我們經(jīng)常會需要在頁面跳轉(zhuǎn)的時候攜帶路由參數(shù),典型的例子就是從列表到詳情頁的時候,需要攜帶詳情的 id,以便詳情頁獲取對應的數(shù)據(jù)。同時,有些時候還需要返回時攜帶參數(shù)返回上一級,以便上級頁面根據(jù)返回結(jié)果更新。本篇將介紹這兩種情形的實現(xiàn)。

Navigator 的 push 和 pop方法

Navigator 導航器的 push 和 pop 方法可以攜帶參數(shù)在頁面間傳遞,其他變形的方法也一樣。pushNamed 方法原型如下:

Future<T?> pushNamed<T extends Object?>(
  String routeName, {
  Object? arguments,
}) {
  return push<T>(_routeNamed<T>(routeName, arguments: arguments)!);
}

除了 routeName 的命名路由以外,還有個可選參數(shù) arguments 用于在路由頁面?zhèn)鬟f參數(shù)。pop 方法也一樣:

void pop<T extends Object?>([ T? result ]) {
  //...
}

可以攜帶一個 result 回傳到上級頁面。

代碼實現(xiàn)

我們使用一個列表跳轉(zhuǎn)到詳情頁來演示路由參數(shù)獲?。斜順?gòu)建文章請看//www.dbjr.com.cn/article/213052.htm)。點擊列表行時攜帶列表數(shù)據(jù)項的 id 跳轉(zhuǎn)到詳情頁。從詳情頁返回時再把該 id 回傳。列表項的 Widget 新增了一個 id屬性,由構(gòu)建列表時初始化得到。

class DynamicItem extends StatelessWidget {
  final int id;
  final String title;
  final String imageUrl;
  final int viewCount;
  static const double ITEM_HEIGHT = 100;
  static const double TITLE_HEIGHT = 80;
  static const double MARGIN_SIZE = 10;
  const DynamicItem(this.id, this.title, this.imageUrl, this.viewCount,
      {Key key})
      : super(key: key);
  //...
}

列表的容器使用 GestureDetector 包裹,以便響應點擊事件。 onTap 方法定義為一個 async 方法,以便使用 await 獲取導航返回時的參數(shù),并使用一個 SnackBar 顯示返回的 id。這里 pushNamed 攜帶了一個 Map 對象將列表的 id傳遞到詳情頁。

@override
Widget build(BuildContext context) {
  return GestureDetector(
    child: Container(
      margin: EdgeInsets.all(MARGIN_SIZE),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _imageWrapper(this.imageUrl),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _titleWrapper(context, this.title),
                _viewCountWrapper(this.viewCount.toString()),
              ],
            ),
          )
        ],
      ),
    ),
    onTap: () async {
      Map<String, dynamic> routeParams = {'id': id};
      var arguments = await Navigator.of(context)
          .pushNamed(RouterTable.dynamicDetail, arguments: routeParams);
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text("從動態(tài)${(arguments as Map<String, dynamic>)['id']}返回"),
      ));
    },
  );
}

這里還使用了一個 arguments變量 接收導航返回的參數(shù),導航若有返回參數(shù),會返回一個 Future 對象,使用 await 即可接收。然后在使用 as 轉(zhuǎn)換為實際的類型進行使用。 在詳情頁中,F(xiàn)lutter 提供了一個ModalRoute的類從當前上下文獲取路由配置參數(shù),代碼如下所示:

class DynamicDetail extends StatelessWidget {
  const DynamicDetail({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Map<String, dynamic> routeParams =
        ModalRoute.of(context).settings?.arguments;

    return WillPopScope(
      child: Scaffold(
        appBar: AppBar(
          title: Text('動態(tài)詳情'),
          brightness: Brightness.dark,
        ),
        body: Center(
          child: Text("產(chǎn)品 id: ${routeParams['id']}"),
        ),
      ),
      onWillPop: () async {
        Navigator.of(context).pop({'id': routeParams['id']});
        return true;
      },
    );
  }
}

實際上這個ModalRoute.of(context).settings就是我們上一篇路由攔截中的onGenerateRoute的 settings 參數(shù),因此假設(shè)我們需要增加額外的路由參數(shù)(例如全局參數(shù)),則可以在 onGenerateRoute 方法中重新組裝路由參數(shù)。 這里有個地方需要注意,因為返回時要攜帶參數(shù),因此我們需要攔截返回響應事件,這時候整個組件可以使用 WillPopScope 包裹,該方法帶有兩個參數(shù):

  • child:子組件,即原有的頁面組件;
  • onWillPop:返回前攔截處理,返回一個 Future<bool>對象,若為 false,則不會返回。若為 true,則返回上一級。這里我們調(diào)用了 攜帶參數(shù)的 pop 方法以便將參數(shù)回傳。實際這里往往做一些其他處理,例如表單沒有保存詢問是否確認李可,還有廣大電商的活動頁詢問你是“忍痛離開”或是“再看一會”的處理。

最終效果

最終運行效果如下圖所示,詳情頁獲取到了 id 參數(shù),返回的時候也接收到了對應的 id。

以上就是Flutter開發(fā)中的路由參數(shù)處理的詳細內(nèi)容,更多關(guān)于Flutter 路由參數(shù)處理的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • RecyclerView實現(xiàn)插入和刪除

    RecyclerView實現(xiàn)插入和刪除

    這篇文章主要為大家詳細介紹了RecyclerView實現(xiàn)插入和刪除,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-08-08
  • Kotlin 編程三分鐘入門

    Kotlin 編程三分鐘入門

    一個多月以來Kotlin從入門到現(xiàn)在,堅持用來開發(fā)的切身感受。因為語法與Java的區(qū)別挺大的一開始很想放棄,如果不是因為項目在使用,想必很少人會嘗試這樣一門小眾語言,但是習慣后會發(fā)現(xiàn)這些年究竟浪費多少時間在寫無用的Java代碼了
    2017-05-05
  • Android PopupWindow使用實例

    Android PopupWindow使用實例

    這篇文章主要介紹了Android PopupWindow使用實例,本文直接給出代碼實例,需要的朋友可以參考下
    2015-06-06
  • Kotlin List與Set和Map實例講解

    Kotlin List與Set和Map實例講解

    集合是可變數(shù)量(可能為0)的一組條目,kotlin標準庫提供一個整套用于集合管理的工具,各種集合對于解決問題都具有重要意義,并且經(jīng)常用到。kotlin中的集合與Java基本類似
    2022-10-10
  • Android自定義ViewGroup打造各種風格的SlidingMenu

    Android自定義ViewGroup打造各種風格的SlidingMenu

    這篇文章主要介紹了Android自定義ViewGroup打造各種風格的SlidingMenu的相關(guān)資料,需要的朋友可以參考下
    2016-02-02
  • 詳解Flutter如何繪制曲線,折線圖及波浪動效

    詳解Flutter如何繪制曲線,折線圖及波浪動效

    這篇文章主要為大家介紹線條類圖形的繪制(正弦曲線、折線圖),并且結(jié)合 Animation 實現(xiàn)了常見的波浪動效,感興趣的小伙伴可以了解一下
    2022-03-03
  • Andriod使用多線程實現(xiàn)輪播圖片

    Andriod使用多線程實現(xiàn)輪播圖片

    這篇文章主要介紹了Andriod使用多線程實現(xiàn)輪播圖片效果,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-10-10
  • Android權(quán)限管理之Permission權(quán)限機制及使用詳解

    Android權(quán)限管理之Permission權(quán)限機制及使用詳解

    本篇文章主要介紹了Android權(quán)限管理之Permission權(quán)限機制及使用,主要講訴了android的權(quán)限使用問題,有需要的可以了解一下。
    2016-11-11
  • Android使alertDialog.builder不會點擊外面和按返回鍵消失的方法

    Android使alertDialog.builder不會點擊外面和按返回鍵消失的方法

    本篇文章主要介紹了Android使alertDialog.builder不會點擊外面和按返回鍵消失的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-01-01
  • Android自定義控件實現(xiàn)萬能的對話框

    Android自定義控件實現(xiàn)萬能的對話框

    這篇文章主要為大家詳細介紹了Android自定義控件實現(xiàn)萬能對話框的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03

最新評論