如何将ChangeNotifier与ValueListenableBuilder结合使用？

问题的核心是：ChangeNotifier并没有实现ValueListenable接口，所以直接传给ValueListenableBuilder会报错。下面提供两种可行的解决办法：

方法一：让ChangeNotifier实现ValueListenable接口 #

直接修改你的ExampleNotifier，让它实现ValueListenable<bool>接口。因为ChangeNotifier已经自带了addListener和removeListener方法，只需要补充一个返回当前状态的value getter即可。

修改后的代码：

class ExampleNotifier extends ChangeNotifier implements ValueListenable<bool> {
  bool isDark = false;

  @override
  bool get value => isDark;

  void toggleTheme() {
    isDark = !isDark;
    notifyListeners();
  }
}

使用示例：

ValueListenableBuilder<bool>(
  valueListenable: ExampleNotifier(),
  builder: (context, isDarkMode, child) {
    return Scaffold(
      backgroundColor: isDarkMode ? Colors.grey[900] : Colors.white,
      body: Center(
        child: ElevatedButton(
          onPressed: () => (valueListenable as ExampleNotifier).toggleTheme(),
          child: Text(isDarkMode ? '切换到浅色模式' : '切换到深色模式'),
        ),
      ),
    );
  },
)

方法二：在ChangeNotifier内部封装ValueNotifier #

如果不想修改原有的ChangeNotifier结构，可以在类里新增一个ValueNotifier成员变量来单独管理需要监听的状态，然后对外暴露这个ValueListenable实例。

代码示例：

class ExampleNotifier extends ChangeNotifier {
  final ValueNotifier<bool> _isDarkNotifier = ValueNotifier(false);

  // 对外暴露可监听的ValueListenable
  ValueListenable<bool> get isDarkListenable => _isDarkNotifier;
  // 保留原有的状态getter
  bool get isDark => _isDarkNotifier.value;

  void toggleTheme() {
    _isDarkNotifier.value = !_isDarkNotifier.value;
    // 如果还有其他依赖ChangeNotifier的组件，依然可以调用notifyListeners
    notifyListeners();
  }
}

使用示例：

final exampleNotifier = ExampleNotifier();

ValueListenableBuilder<bool>(
  valueListenable: exampleNotifier.isDarkListenable,
  builder: (context, isDarkMode, child) {
    return Switch(
      value: isDarkMode,
      onChanged: (_) => exampleNotifier.toggleTheme(),
    );
  },
)

内容的提问来源于stack exchange，提问作者Gwhyyy