ValueListenableBuilder 和 addListener 在 ChangeNotifier的区别

1、前言

ValueListenableBuilder 和 addListener 在 ChangeNotifier 中有不同的用途和用法，适用于不同的场景。它们的主要区别在于它们如何监听和响应状态变化，以及它们的用法和特性。

2、ValueListenableBuilder用法

ValueListenableBuilder 是一个 Flutter Widget，用于监听 ValueNotifier 或其他 ValueListenable 类型的对象的变化，并自动重建其子 Widget。它非常适合用于简化 UI 更新逻辑，尤其是当你只关心特定值的变化时。

3、ValueListenableBuilder特点

简洁：ValueListenableBuilder 简化了在 UI 中使用 ValueNotifier 的过程。它将监听和 UI 重建逻辑封装在一起，使代码更简洁。
自动重建：每当 ValueNotifier 的值发生变化时，ValueListenableBuilder 会自动调用 builder 函数重新构建 Widget，从而反映最新的值。
局部更新：适用于仅依赖于单一值的场景，可以使 UI 更高效地更新。
示例

ValueNotifier<int> _valueNotifier = ValueNotifier<int>(0);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ValueListenableBuilder<int>(
        valueListenable: _valueNotifier,
        builder: (context, value, child) {
          return Text('Current value: $value');
        },
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        _valueNotifier.value++;
      },
      child: Icon(Icons.add),
    ),
  );
}

4、addListener 和 ChangeNotifier用法

addListener 是 ChangeNotifier 类中的一个方法，用于添加监听器，以便在 ChangeNotifier 的状态发生变化时通知监听者。监听器通常是一个回调函数，它在调用 notifyListeners() 时执行。

5、addListener特点

灵活性：addListener 提供了更大的灵活性，适用于更复杂的状态管理需求。你可以手动添加监听器并在任何地方调用 notifyListeners() 来触发状态更新。
自定义：适合用于自定义状态管理类，可以实现更复杂的逻辑和更新机制。
更高的控制权：使用 addListener 可以更精细地控制哪些 Widget 或部分 UI 需要更新。
示例

class MyModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

// 使用
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final MyModel _model = MyModel();

  @override
  void initState() {
    super.initState();
    _model.addListener(_onModelChanged);
  }

  void _onModelChanged() {
    setState(() {});
  }

  @override
  void dispose() {
    _model.removeListener(_onModelChanged);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Count: ${_model.count}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _model.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

6、总结

ValueListenableBuilder 是一个用于监听 ValueNotifier 并自动重建 Widget 的便捷工具，适用于简单的 UI 更新。
addListener 和 ChangeNotifier 提供了更高的灵活性和控制力，适合用于更复杂的状态管理和自定义逻辑。
选择哪种方法取决于你的具体需求和应用场景。如果你只是需要监听单一值并自动更新 UI，ValueListenableBuilder 更简单方便。而如果你需要更复杂的状态管理或自定义逻辑，ChangeNotifier 和 addListener 提供了更多的控制选项。