Flutter 数据监听Widget 自动更新你的UI-CSDN博客

本文介绍了在Flutter开发中如何使用ValueListenableBuilder和ValueNotifier实现数据变化时UI自动更新。通过官方Demo和自定义示例展示了其工作原理和使用场景，强调了其在减少繁琐更新操作上的便利性。

摘要由CSDN通过智能技术生成

在开发中，我们很有可能会遇见这种需求：

这里每一个圆形都是同一个数据。

现在这个圆形的数据被修改了，我们要更新这个页面上所有的数据，是不是很麻烦？

Flutter为我们考虑到了。

ValueListenableBuilder

看名字我们也就能看出来这个控件是干嘛的，监听值的构造器。

那我们照例先看官方文档：

A widget whose content stays synced with a ValueListenable.

Given a ValueListenable<T> and a builder which builds widgets from concrete values of T, this class will automatically register itself as a listener of the ValueListenable and call the builder with updated values when the value changes.
复制代码

使内容和 ValueListenable 保持一致的控件。

给定ValueListenable 一个泛型和一个构建器，它从泛型的具体值构建小部件，这个类将自动注册为ValueListenable 的侦听器，并在值更改时用更新的值调用构建器。

说了这么多 ValueListenable，它到底是个啥？

点进去看：

// 用于公开值的可侦听子类的接口。
An interface for subclasses of Listenable that expose a value.

// 这个接口由ValueNotifier和Animation实现，并且允许其他API交替接受这些实现中的任何一个。
This interface is implemented by ValueNotifier<T> and Animation<T>, and allows other APIs to accept either of those implementations interchangeably.

复制代码

那也就是说，这个类被ValueNotifier和Animation实现，从名字我们也能理解他们是干嘛的。

一个是值，一个是动画。

官方 Demo

再来看一下官方Demo，来确认怎么使用：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ValueNotifier<int> _counter = ValueNotifier<