Flutter Widget 之ValueListenableBuilder

想象一下你有这样一些数据，它们贯穿于你的应用程序，你希望当这些数据发哼变化时，你的应用程序也能随时随地进行更新。

这听起来像是变成的噩梦，找出数据发生变化的地方，并在多处手动地进行用户界面的更新。

但是如果你使用ValueNotifier和ValueListenableBuilder widget，你就不用费力地进行手动操作了。

假设你有一堆widgets散落在widget 树中，这些widget都使用了同一个变量的值。

对于像字符串或整数这样的简单的变量，只要将它们包装在ValueNotifier中，

ValueNotifier(0)；

它就会管理变量的状态，并在变量的值发生改变时，通知监听该变量的端口。

ValueNotifier(42);

ValueNotifier(43);
ValueListenableBuilder<int>(
    valueListenable: value,
    builder: (context, value, _){
        return Text('Value is $value');
    }
);

如果要在软件中使用该变量，只需要将其封装在ValueListenableBuilder中。

ValueNotifier('Hello');
ValueListenableBuilder<String>(
    valueListenable: value,
    builder: (context, value, _){
        return Text('$value');
    }
);

ValueListenableBuilder将会监听该变量，当该变量的值发生变化，将会自动重建其子变量。

如果你有更复杂的数据，可以通过扩展的ValueNotifier为你的数据类创建自定义的通知程序。

每当数据发生变化时，就必须调用notifyListeners函数。

class MyNotifier extends ValueNotifier<MyDataClass> {
    MyNotifier(MyDataClass value) : super(value);

    void changeMyData(int i) {
        value.myInt = i;
        notifyListeners();
    }
}

Flutter充分利用了ValueListenable接口，特别是针对动画。

你可以将数据放入ValueListenablebuilders中，并在动画类widget中使用它们。

ValueListenableBuilder(
    valueListenable: myAnimation,
    child: Container(
        width: 100, 
        height: 100,
        color: Colors.green,
    ),
    builder: (context, value, child) {
        return Transform.rotate(
            angle: MyAnimation.value * 2.0 * math.pi,
            child: child,
        );
    } 
)    

最后一个提示。使用InheritedWidget来让你的数据可以被widget树中的所有widget访问。

如果想了解有关ValueListenableBuilder的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址