詳解Flutter中數據傳遞的方式
在Flutter中,常見的數據傳遞一共有以下幾種:
1、構造方法傳遞
Flutter的構造方法具備著dart語言的特點,參數具備可選狀態(tài),通過構造方法傳遞數據,可以很方便的將任意數據進行傳遞,平時開發(fā)中,A跳轉B頁面最常用的方法就是通過構造方法進行傳遞。比如我們最常見的Key就是通過構造一級一級向下傳遞的。
優(yōu)點: 相鄰頁面之間傳遞數據非常方便,你不需要進行任何額外的操作。
缺點: 當頁面層級過多以及類過多時,需一級一級傳遞,寫起來非常麻煩,代碼耦合性高。
2、InheritedWidget
為了解決構造函數一級一級鄉(xiāng)下傳遞的的缺點,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);
/// 定義一個靜態(tài)方法 獲取數據
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方法中,并且沒有延遲加載,比如這個頁面為動態(tài)加載,那么在C頁面中的initState獲取數據就會報錯,原因就是首次構建時,沒有加載子頁面導致,可在build方法中獲取,或者延時獲取。
優(yōu)點: 自上而下,無需一級一級傳遞,傳遞方便。
缺點: 不能跨組件傳遞。
應用場景: 系統(tǒng)中比如我們常見的MediaQuery設備信息和Theme應用主題就是通過這種方式在來進行統(tǒng)一數據共享的。
3、Notification
Notification是FLutter中的一種通知機制,和 InheritedWidget相反,他可以自下而上通知父組件更新數據,
定義傳遞數據類:
class TestDataN extends Notification{
final String data;
TestDataN(this.data);
}
子組件通知調用dispacth方法通知父組件。
TestDataN("data").dispatch(context);
在父組件進行監(jiān)聽:
NotificationListener(
onNotification: (data){
print("data$data");
return true;
},child: child);
應用場景: 比如我們的ListView滾動監(jiān)聽、就是通過Notification實現的。
4、Stream & event_bus
以上的2、3數據傳遞方式都是基于同一個widget樹進行傳遞的,跨組件通信我們可以使用Stream事件流進行傳遞,通過訂閱者模式監(jiān)聽數據,可以在任意組件中進行數據傳遞,event_bus插件就是使用這種方式來進行數據傳遞的。
eventBus示例代碼:
// 創(chuàng)建公用對象
EventBus eventBus = EventBus();
// 監(jiān)聽數據
eventBus.on().listen((event) {
});
// 發(fā)送
eventBus.fire(event);
使用完畢在注冊接收數據頁面記得銷毀:eventBus.destroy();
優(yōu)點: 可以跨組件通信。
到此這篇關于詳解Flutter中數據傳遞的方式的文章就介紹到這了,更多相關Flutter數據傳遞內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Android SeekBar 自定義thumb旋轉動畫效果
某些音樂播放或者視頻播放的界面上,資源還在加載時,進度條的原點(thumb)會顯示一個轉圈的效果。這篇文章主要介紹了Android SeekBar 自定義thumb thumb旋轉動畫效果,需要的朋友可以參考下2021-11-11
Android適配器Adapter與ListView和RecycleView的簡單使用
本文將為大家介紹Android開發(fā)中常用的適配器(Adapter)概念,以及ListView和RecycleView的簡單使用方法,需要的朋友可以參考下2023-05-05

