詳解Flutter中數據傳遞的方式

Posted on by

在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！

推薦閱讀：