簡介

該Widget的顯示內(nèi)容 會與ValueListenable保持同步，ValueListenable是dart的接口，該接口用于 保持value變化的監(jiān)聽者。這里涉及到了一套dart本身提供的通知機制，機制結(jié)構(gòu)如下：

ChangeNotifier

使用ValueListenableBuilder時需要提供兩個 必填參數(shù) ：ValueListenable參數(shù)和ValueWidgetBuilder 參數(shù)。ValueListenable參數(shù)用于注冊值變化回調(diào)。ValueWidgetBuilder用于同步value變化的UI。

使用參數(shù)

ValueListenable

通過該參數(shù) 添加了一個變化的回調(diào)，回調(diào)是setState()。這樣當(dāng)發(fā)送了值變化的通知后，該widget就會setState（），就實現(xiàn)了與value的同步。通常使用的是ValueNotifer，因為ValueNotifer可以快捷的發(fā)送通知。

ValueWidgetBuilder

該參數(shù)是方法參數(shù)，代碼如下：

Widget Function(BuildContext context, T value, Widget child)
//context :上下文
//value：變化的值，我們就是根據(jù)這個value實現(xiàn)了 數(shù)據(jù)內(nèi)容同步，
//child:該參數(shù)并不常用。類似動畫的使用，可以給某個widget傳入一個child，讓該widget顯示child。

使用案例

兄弟之間通信

比如點擊按鈕之后，文本發(fā)生變化。

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<int> valueNotifier;

  @override
  void initState() {
    super.initState();
    //初始化通知器
    valueNotifier = ValueNotifier(0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('兄弟widget通信'),
      ),
      body: Center(
        child: ValueListenableBuilder(
          ///為什么要用ValueNotifier呢，因為需要快捷的發(fā)送通知
          valueListenable: valueNotifier,
          ///動態(tài)更新UI
          builder: (context, value, _) {
            return Text(
              '$value',
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ///更新數(shù)據(jù)，發(fā)送通知
          valueNotifier.value = ++valueNotifier.value;
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

上面代碼的處理流程：A：ValueListenableBuilder監(jiān)聽了Value的變化，當(dāng)Value變化內(nèi)部觸發(fā)setState
B：按鈕點擊valueNotifier發(fā)送通知
效果如下：

效果

小結(jié)

ValueListenableBuilder是簡易版的Provider，只監(jiān)聽了一個value的變化。Provider除了監(jiān)聽變化之外，還增加了攔截、多value，子獲取祖先value等功能。