詳解Flutter中數據傳遞的方式

在Flutter中,常見的數據傳遞一共有以下幾種:

1、構造方法傳遞

Flutter的構造方法具備著dart語言的特點,參數具備可選狀態,通過構造方法傳遞數據,可以很方便的將任意數據進行傳遞,平時開發中,A跳轉B頁面最常用的方法就是通過構造方法進行傳遞。比如我們最常見的Key就是通過構造一級一級向下傳遞的。

優點: 相鄰頁面之間傳遞數據非常方便,你不需要進行任何額外的操作。

缺點: 當頁面層級過多以及類過多時,需一級一級傳遞,寫起來非常麻煩,代碼耦合性高。

2、InheritedWidget

為瞭解決構造函數一級一級鄉下傳遞的的缺點,Flutter派生出瞭功能性組件InheritedWidget,通過它可以實現頂級widget的數據共享,也就是說無需一級一級向下傳遞,即可獲取數據,比如A頁面有一個數據,需要在C頁面使用,那麼就可以不經過B頁面獲取,前提ABC三個頁面是屬於一個Widget中的,常見的 TabView佈局頂層數據共享,適合復雜頁面頂層向下傳遞數據,使用也很簡單。

示例代碼:

/// 數據共享
class TestData extends InheritedWidget {
  final Widget child;
  final String data; // 共享數據

  // 構造
  const TestData({
    Key? key,
    required this.child,
    required this.data,
  }) : super(key: key, child: child);

/// 定義一個靜態方法 獲取數據
static String of(BuildContext context) {
// return context.dependOnInheritedWidgetOfExactType<TestDataestData>()?.data??"數據有誤";
return (context.getElementForInheritedWidgetOfExactType<TestData>()?.widget as TestData).data ;
}
  @override
  bool updateShouldNotify(covariant TestData oldWidget) {
    return child != oldWidget.child;
  }
}

然後在A頁面的根佈局套上TestData,在C頁面通過of方法即可獲取數據。

兩種更新數據方法:

dependOnInheritedWidgetOfExactType: 子組件更新didChangeDependencies();

getElementForInheritedWidgetOfExactType: 不更新。

需要註意的點: 這種傳遞方式是樹狀結構從上而下進行傳遞,所共享數據的頁面必須在頂層的build方法中,並且沒有延遲加載,比如這個頁面為動態加載,那麼在C頁面中的initState獲取數據就會報錯,原因就是首次構建時,沒有加載子頁面導致,可在build方法中獲取,或者延時獲取。

優點: 自上而下,無需一級一級傳遞,傳遞方便。

缺點: 不能跨組件傳遞。

應用場景: 系統中比如我們常見的MediaQuery設備信息和Theme應用主題就是通過這種方式在來進行統一數據共享的。

3、Notification

Notification是FLutter中的一種通知機制,和 InheritedWidget相反,他可以自下而上通知父組件更新數據,

定義傳遞數據類:

class TestDataN extends Notification{
  final String data;
  TestDataN(this.data);
}

子組件通知調用dispacth方法通知父組件。

TestDataN("data").dispatch(context);

在父組件進行監聽:

NotificationListener(
    onNotification: (data){
      print("data$data");
  return true;
},child: child);

應用場景: 比如我們的ListView滾動監聽、就是通過Notification實現的。

4、Stream & event_bus

以上的2、3數據傳遞方式都是基於同一個widget樹進行傳遞的,跨組件通信我們可以使用Stream事件流進行傳遞,通過訂閱者模式監聽數據,可以在任意組件中進行數據傳遞,event_bus插件就是使用這種方式來進行數據傳遞的。

eventBus示例代碼:

// 創建公用對象
EventBus eventBus = EventBus();
// 監聽數據
eventBus.on().listen((event) {

});
// 發送
eventBus.fire(event);

使用完畢在註冊接收數據頁面記得銷毀:eventBus.destroy();

優點: 可以跨組件通信。

到此這篇關於詳解Flutter中數據傳遞的方式的文章就介紹到這瞭,更多相關Flutter數據傳遞內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: