Flutter如何监听变量值变化并在值变更时触发执行指定函数

你之前对ValueNotifier的使用方式存在错误：ValueNotifier是Flutter内置的可监听值包装类，不是用来定义监听回调的函数，直接声明同名函数无法触发监听逻辑。

这是最标准的实现方式，步骤如下：

• 将需要监听的变量包装为ValueNotifier类型
• 在initState中注册监听回调
• 在dispose中移除监听避免内存泄漏
• 修改变量时必须修改value属性才会触发监听

完整实现代码：

import 'package:flutter/material.dart';

class TestPageWidget extends StatefulWidget {
  const TestPageWidget({ Key? key }) : super(key: key);

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

class _TestPageWidgetState extends State<TestPageWidget> {
  // 用ValueNotifier包装变量
  final ValueNotifier<int> myItem = ValueNotifier(1);

  @override
  void initState() {
    super.initState();
    // 注册监听回调
    myItem.addListener(_onMyItemChanged);
   
    // 3秒后修改myItem的值
    Future.delayed(const Duration(seconds: 3), () {
      // 必须修改value属性才会触发监听
      myItem.value = 3;
    });
  }

  // 变量变化时触发的回调
  void _onMyItemChanged() {
    print('Value has now changed, new value: ${myItem.value}');
    // 此处可添加需要执行的其他逻辑
  }
   
  @override
  void dispose() {
    // 移除监听避免内存泄漏
    myItem.removeListener(_onMyItemChanged);
    myItem.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }
}

如果场景比较简单，不想引入ValueNotifier，可以通过私有变量+自定义setter的方式实现监听：

import 'package:flutter/material.dart';

class TestPageWidget extends StatefulWidget {
  const TestPageWidget({ Key? key }) : super(key: key);

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

class _TestPageWidgetState extends State<TestPageWidget> {
  // 定义私有变量存储实际值
  int _myItem = 1;
  // 对外暴露get方法
  int get myItem => _myItem;
  // 自定义set方法，赋值时触发回调
  set myItem(int newValue) {
    if (_myItem == newValue) return; // 值相同时可跳过执行逻辑
    _myItem = newValue;
    _onMyItemChanged();
  }

  @override
  void initState() {
    super.initState();
   
    // 3秒后修改myItem的值
    Future.delayed(const Duration(seconds: 3), () {
      // 直接赋值即可触发回调
      myItem = 3;
    });
  }

  // 变量变化时触发的回调
  void _onMyItemChanged() {
    print('Value has now changed, new value: $myItem');
    // 此处可添加需要执行的其他逻辑
  }
   
  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }
}

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