詳解Flutter中的數(shù)據(jù)傳遞
Flutter 中的數(shù)據(jù)傳遞
在開發(fā)中,數(shù)據(jù)從一個頁面?zhèn)鬟f到另一個頁面事很常用的,在Android 開發(fā)中,通常是通過把數(shù)據(jù)放到 intent 中傳遞過去。在 Flutter 中,數(shù)據(jù)是如何傳遞的呢?
在Flutter 中一切都是Widget,所以數(shù)據(jù)的傳遞就成了數(shù)據(jù)才Widget 中的傳遞。在之前的學習中,數(shù)據(jù)從一個Widget 傳遞到 子 Widget 是通過構造函數(shù),一層一層的往里面?zhèn)鳎?widget 的層級比較少,還沒什么問題,要是層級很多,這樣傳遞就太麻煩了。
還好Flutter 還提供了三種方案:InheritedWidget、Notification 和 EventBus來解決數(shù)據(jù)傳遞問題。
InheritedWidget
InheritedWidget 是 Flutter 中的一個功能型 Widget,適用于在 Widget 樹中共享數(shù)據(jù)的場景。通過它,我們可以高效地將數(shù)據(jù)在 Widget 樹中進行跨層傳遞。
下面看計數(shù)器的例子:
// 1.InheritedWidget,我們定義了一個繼承自它的新類 CountContainer,里面存放需要共享的數(shù)據(jù) //然后,我們將計數(shù)器狀態(tài) count 屬性放到 CountContainer 中,并提供了一個 of 方法方便其子 Widget 在 Widget 樹中找到它。 //最后,我們重寫了 updateShouldNotify 方法,這個方法會在 Flutter 判斷 InheritedWidget 是否需要重建, class CountContainer extends InheritedWidget { static CountContainer of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<CountContainer>(); final _InheritedWidgetHomeState mode; final Function() function; CountContainer( {Key key, @required this.mode, @required this.function, @required Widget child}) : super(key: key, child: child); @override bool updateShouldNotify(covariant InheritedWidget oldWidget) { return this != oldWidget; } } // 2. 通過構建方法,把數(shù)據(jù)放到 InheritedWidget中 class _InheritedWidgetHomeState<InheritedWidgetHome> extends State { int count = 0; void _incrementCounter() => setState(() { count++; }); @override Widget build(BuildContext context) { return CountContainer( mode: this, function: _incrementCounter, child: CountWidget(), ); } } // 3. 在子 widget 通過 CountContainer.of方法,獲取到自定義的 InheritedWidget,并從中取得共享的數(shù)據(jù) class CountWidget extends StatelessWidget { @override Widget build(BuildContext context) { CountContainer state = CountContainer.of(context); return Scaffold( appBar: AppBar( title: Text("InheritedWidget demo"), ), body: Text("current count is ${state.mode.count}"), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: state.function, ), ); } }
可以看到,InheritedWidget 的數(shù)據(jù)流動方式是從父 Widget 到子 Widget 逐層傳遞。
- 首先把通過構造函數(shù)需要共享的數(shù)據(jù)放到 InheritedWidget 中,然后提供一個靜態(tài)方法,返回自身;
- 然后在把自定義的 InheritedWidget做為父容器,傳入需要共享的數(shù)據(jù);
- 最后在子widget 中,通過靜態(tài)方法獲取到 InheritedWidget 對象,自然就拿到里面的數(shù)據(jù)了。
EventBus
無論是 InheritedWidget 還是 Notificaiton,它們的使用場景都需要依靠 Widget 樹,在使用起來就有點極限了,但Flutter 提供了一個更好的數(shù)據(jù)傳遞方法--EventBus,傳遞數(shù)據(jù)不再受到限制了。
在原生開發(fā)中,也有使用過 事件總線EventBus,F(xiàn)lutter 中實現(xiàn)跨組件通信的機制也是一樣。它遵循發(fā)布 / 訂閱模式,允許訂閱者訂閱事件,當發(fā)布者觸發(fā)事件時,訂閱者和發(fā)布者之間可以通過事件進行交互。發(fā)布者和訂閱者之間無需有父子關系,甚至非 Widget 對象也可以發(fā)布 / 訂閱。這些特點與其他平臺的事件總線機制是類似的。
由于 EventBus是第三方庫,所以需要引入:
event_bus: 2.0.0
從第二個頁面,把數(shù)據(jù)回傳到第一個頁面
//建立公共的event bus EventBus eventBus = EventBus(); class CustomEvent { String msg; CustomEvent(this.msg); } class _EventBusPager1State extends State { String message = "原來的數(shù)據(jù)"; StreamSubscription subscription; @override void initState() { subscription = eventBus.on<CustomEvent>().listen((event) { setState(() { message = event.msg; }); }); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("EventBusPager1"), ), body: Center( child: Text(message), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.open_in_browser), onPressed: () => Navigator.push( context, MaterialPageRoute(builder: (context) => EventBusPager2())), ), ); } @override void dispose() { subscription.cancel(); super.dispose(); } } class EventBusPager2 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("EventBusPager2"), ), body: Center( child: Text("EventBusPager1"), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.send), onPressed: () { eventBus.fire(CustomEvent("data from page 2")); Navigator.pop(context); }, ), ); } }
總結
通過學習了解了 在Flutter 中如何傳遞數(shù)據(jù)的,大致分為四種方式:
- 通過屬性,一層一層往下傳
- 通過 把數(shù)據(jù)寫到 InheritedWidget的子類,然后把共享的數(shù)據(jù)放到里面,并提獲取自身的供靜態(tài)方法,在需要的地方通過靜態(tài)方法獲取到 InheritedWidget對象,并獲取數(shù)據(jù),這種方式是能從父widget 傳遞到子widget;
- 通過 Notifaction 發(fā)送消息,然后再父 widget 進行監(jiān)聽;
- 通過eventBus ,通過發(fā)布 / 訂閱模式,來完成數(shù)據(jù)的傳遞,也是開發(fā)中常用的。
以上就是詳解Flutter中的數(shù)據(jù)傳遞的詳細內(nèi)容,更多關于Flutter中的數(shù)據(jù)傳遞的資料請關注腳本之家其它相關文章!
相關文章
關注Ionic底部導航按鈕tabs在android情況下浮在上面的處理
Ionic是一款流行的移動端開發(fā)框架,但是剛入門的同學會發(fā)現(xiàn),Ionic在iOS和Android的底部tabs顯示不一樣。在安卓情況下底部tabs會浮上去,下面給大家介紹下實現(xiàn)代碼,一起看看吧2016-12-12Android開發(fā)實現(xiàn)TextView超鏈接5種方式源碼實例
這篇文章主要介紹了Android開發(fā)實現(xiàn)TextView超鏈接5種方式源碼實例,需要的朋友可以參考下2020-03-03Android仿微信調(diào)用第三方地圖應用導航(高德、百度、騰訊)
這篇文章主要介紹了Android仿微信調(diào)用第三方地圖應用導航,包括高德、百度、騰訊地圖,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10Android中使用ScrollView指定view的頂部懸停效果
在項目開發(fā)中遇到這樣的需求,需要實現(xiàn)scrollview頂部的懸停效果,實現(xiàn)原理非常簡單,下面小編通過本文給大家分享實例代碼,需要的朋友參考下2017-04-04