亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解Flutter中的數(shù)據(jù)傳遞

 更新時(shí)間:2021年04月06日 08:58:15   作者:移動(dòng)的小太陽(yáng)  
這篇文章主要介紹了Flutter中的數(shù)據(jù)傳遞的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用Flutter,感興趣的朋友可以了解下

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 逐層傳遞。

  1. 首先把通過(guò)構(gòu)造函數(shù)需要共享的數(shù)據(jù)放到 InheritedWidget 中,然后提供一個(gè)靜態(tài)方法,返回自身;
  2. 然后在把自定義的 InheritedWidget做為父容器,傳入需要共享的數(shù)據(jù);
  3. 最后在子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ù)的,大致分為四種方式:

  1. 通過(guò)屬性,一層一層往下傳
  2. 通過(guò) 把數(shù)據(jù)寫到 InheritedWidget的子類,然后把共享的數(shù)據(jù)放到里面,并提獲取自身的供靜態(tài)方法,在需要的地方通過(guò)靜態(tài)方法獲取到 InheritedWidget對(duì)象,并獲取數(shù)據(jù),這種方式是能從父widget 傳遞到子widget;
  3. 通過(guò) Notifaction 發(fā)送消息,然后再父 widget 進(jìn)行監(jiān)聽(tīng);
  4. 通過(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)文章

最新評(píng)論