揭开Flutter ValueNotifier与ValueListenableBuilder的不解之缘：层层递进，剖析局部刷新背后的秘密

2023-10-27 12:14:41

Flutter ValueNotifier：值的变化，尽在掌控

在Flutter的世界里，ValueNotifier扮演着举足轻重的角色，它是Dart中一个神奇的类，能够轻松追踪值的改变。你可以将它理解为一个“盒子”，里面装着一个值，一旦这个值发生变化，所有监听它的组件都会收到通知，并随之更新。

ValueNotifier的使用非常简单，只需创建一个实例，然后将值赋给它即可。例如：

final valueNotifier = ValueNotifier<int>(0);

现在，valueNotifier就成为了一个拥有整数值的ValueNotifier。你可以通过valueNotifier.value来获取当前值，也可以通过valueNotifier.addListener(listener)来添加一个监听器，当值发生变化时，该监听器就会被调用。

ValueListenableBuilder：局部刷新，如虎添翼

ValueListenableBuilder是Flutter中另一个强大的工具，它可以与ValueNotifier完美结合，实现局部刷新。局部刷新是指只刷新受值变化影响的组件，而其他组件保持不变。这对于大型应用来说非常重要，因为它可以大大提高性能。

要使用ValueListenableBuilder，你需要先创建一个ValueNotifier，然后将它作为参数传递给ValueListenableBuilder。例如：

ValueListenableBuilder<int>(
  valueListenable: valueNotifier,
  builder: (BuildContext context, int value, Widget? child) {
    return Text('$value');
  },
);

在这个例子中，ValueListenableBuilder会监听valueNotifier的值的变化。每当valueNotifier的值发生变化时，ValueListenableBuilder就会调用builder函数来重新构建Text组件。

揭秘局部刷新的秘密：ValueListenableBuilder.child的妙用

为什么ValueListenableBuilder.child能避免被rebuild？答案就在于ValueListenableBuilder的内部实现。ValueListenableBuilder实际上会创建一个新的StatefulWidget，该StatefulWidget的state会监听valueNotifier的值的变化。当值发生变化时，state会调用setState()方法，从而触发UI的更新。

但是，ValueListenableBuilder.child并不是该StatefulWidget的一部分，因此它不会受到setState()方法的影响。这意味着，只要ValueListenableBuilder.child保持不变，它就不会被重建。