詳解Flutter中的數(shù)據(jù)傳遞
Flutter 中的數(shù)據(jù)傳遞
在開(kāi)發(fā)中,數(shù)據(jù)從一個(gè)頁(yè)面?zhèn)鬟f到另一個(gè)頁(yè)面事很常用的,在Android 開(kāi)發(fā)中,通常是通過(guò)把數(shù)據(jù)放到 intent 中傳遞過(guò)去。在 Flutter 中,數(shù)據(jù)是如何傳遞的呢?
在Flutter 中一切都是Widget,所以數(shù)據(jù)的傳遞就成了數(shù)據(jù)才Widget 中的傳遞。在之前的學(xué)習(xí)中,數(shù)據(jù)從一個(gè)Widget 傳遞到 子 Widget 是通過(guò)構(gòu)造函數(shù),一層一層的往里面?zhèn)?,要?widget 的層級(jí)比較少,還沒(méi)什么問(wèn)題,要是層級(jí)很多,這樣傳遞就太麻煩了。
還好Flutter 還提供了三種方案:InheritedWidget、Notification 和 EventBus來(lái)解決數(shù)據(jù)傳遞問(wèn)題。
InheritedWidget
InheritedWidget 是 Flutter 中的一個(gè)功能型 Widget,適用于在 Widget 樹(shù)中共享數(shù)據(jù)的場(chǎng)景。通過(guò)它,我們可以高效地將數(shù)據(jù)在 Widget 樹(shù)中進(jìn)行跨層傳遞。
下面看計(jì)數(shù)器的例子:
// 1.InheritedWidget,我們定義了一個(gè)繼承自它的新類 CountContainer,里面存放需要共享的數(shù)據(jù) //然后,我們將計(jì)數(shù)器狀態(tài) count 屬性放到 CountContainer 中,并提供了一個(gè) of 方法方便其子 Widget 在 Widget 樹(shù)中找到它。 //最后,我們重寫了 updateShouldNotify 方法,這個(gè)方法會(huì)在 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. 通過(guò)構(gòu)建方法,把數(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 通過(guò) 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ù)流動(dòng)方式是從父 Widget 到子 Widget 逐層傳遞。
- 首先把通過(guò)構(gòu)造函數(shù)需要共享的數(shù)據(jù)放到 InheritedWidget 中,然后提供一個(gè)靜態(tài)方法,返回自身;
- 然后在把自定義的 InheritedWidget做為父容器,傳入需要共享的數(shù)據(jù);
- 最后在子widget 中,通過(guò)靜態(tài)方法獲取到 InheritedWidget 對(duì)象,自然就拿到里面的數(shù)據(jù)了。
EventBus
無(wú)論是 InheritedWidget 還是 Notificaiton,它們的使用場(chǎng)景都需要依靠 Widget 樹(shù),在使用起來(lái)就有點(diǎn)極限了,但Flutter 提供了一個(gè)更好的數(shù)據(jù)傳遞方法--EventBus,傳遞數(shù)據(jù)不再受到限制了。
在原生開(kāi)發(fā)中,也有使用過(guò) 事件總線EventBus,F(xiàn)lutter 中實(shí)現(xiàn)跨組件通信的機(jī)制也是一樣。它遵循發(fā)布 / 訂閱模式,允許訂閱者訂閱事件,當(dāng)發(fā)布者觸發(fā)事件時(shí),訂閱者和發(fā)布者之間可以通過(guò)事件進(jìn)行交互。發(fā)布者和訂閱者之間無(wú)需有父子關(guān)系,甚至非 Widget 對(duì)象也可以發(fā)布 / 訂閱。這些特點(diǎn)與其他平臺(tái)的事件總線機(jī)制是類似的。
由于 EventBus是第三方庫(kù),所以需要引入:
event_bus: 2.0.0
從第二個(gè)頁(yè)面,把數(shù)據(jù)回傳到第一個(gè)頁(yè)面
//建立公共的event bus EventBus eventBus = EventBus(); class CustomEvent { String msg; CustomEvent(this.msg); } class _EventBusPager1State extends State { String message = "原來(lái)的數(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); }, ), ); } }
總結(jié)
通過(guò)學(xué)習(xí)了解了 在Flutter 中如何傳遞數(shù)據(jù)的,大致分為四種方式:
- 通過(guò)屬性,一層一層往下傳
- 通過(guò) 把數(shù)據(jù)寫到 InheritedWidget的子類,然后把共享的數(shù)據(jù)放到里面,并提獲取自身的供靜態(tài)方法,在需要的地方通過(guò)靜態(tài)方法獲取到 InheritedWidget對(duì)象,并獲取數(shù)據(jù),這種方式是能從父widget 傳遞到子widget;
- 通過(guò) Notifaction 發(fā)送消息,然后再父 widget 進(jìn)行監(jiān)聽(tīng);
- 通過(guò)eventBus ,通過(guò)發(fā)布 / 訂閱模式,來(lái)完成數(shù)據(jù)的傳遞,也是開(kāi)發(fā)中常用的。
以上就是詳解Flutter中的數(shù)據(jù)傳遞的詳細(xì)內(nèi)容,更多關(guān)于Flutter中的數(shù)據(jù)傳遞的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)注Ionic底部導(dǎo)航按鈕tabs在android情況下浮在上面的處理
Ionic是一款流行的移動(dòng)端開(kāi)發(fā)框架,但是剛?cè)腴T的同學(xué)會(huì)發(fā)現(xiàn),Ionic在iOS和Android的底部tabs顯示不一樣。在安卓情況下底部tabs會(huì)浮上去,下面給大家介紹下實(shí)現(xiàn)代碼,一起看看吧2016-12-12安卓(android)怎么實(shí)現(xiàn)下拉刷新
這里我們將采取的方案是使用組合View的方式,先自定義一個(gè)布局繼承自LinearLayout,然后在這個(gè)布局中加入下拉頭和ListView這兩個(gè)子元素,并讓這兩個(gè)子元素縱向排列。對(duì)安卓(android)怎么實(shí)現(xiàn)下拉刷新的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-04-04Android啟動(dòng)頁(yè)面定時(shí)跳轉(zhuǎn)的三種方法
這篇文章主要介紹了Android啟動(dòng)頁(yè)面定時(shí)跳轉(zhuǎn)的三種方法,實(shí)現(xiàn)打開(kāi)一個(gè)Android手機(jī)APP的歡迎界面后跳轉(zhuǎn)到指定界面的效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11關(guān)于Android冷啟動(dòng)耗時(shí)優(yōu)化詳解
大家好,本篇文章主要講的是關(guān)于Android冷啟動(dòng)耗時(shí)優(yōu)化詳解,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下2022-01-01Android開(kāi)發(fā)實(shí)現(xiàn)TextView超鏈接5種方式源碼實(shí)例
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)TextView超鏈接5種方式源碼實(shí)例,需要的朋友可以參考下2020-03-03Android仿微信調(diào)用第三方地圖應(yīng)用導(dǎo)航(高德、百度、騰訊)
這篇文章主要介紹了Android仿微信調(diào)用第三方地圖應(yīng)用導(dǎo)航,包括高德、百度、騰訊地圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10Flutter實(shí)現(xiàn)底部菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)底部菜單導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02Android中使用ScrollView指定view的頂部懸停效果
在項(xiàng)目開(kāi)發(fā)中遇到這樣的需求,需要實(shí)現(xiàn)scrollview頂部的懸停效果,實(shí)現(xiàn)原理非常簡(jiǎn)單,下面小編通過(guò)本文給大家分享實(shí)例代碼,需要的朋友參考下2017-04-04