ValueNotifier无法更新图标按钮颜色，仍需调用setState()

问题根源 #

1. ValueNotifier生命周期错误：你把ValueNotifier<bool>定义在FutureBuilder的builder回调内部，每次FutureBuilder重建时都会创建新的实例，之前的监听关系失效，导致图标颜色无法响应变化。
2. 未主动更新ValueNotifier：下载或删除文件完成后，没有更新ValueNotifier的value，所以ValueListenableBuilder不会触发局部刷新。

修复方案 #

步骤1：将ValueNotifier提升到State类中

在_AccountingState中定义对应文件的ValueNotifier，确保其生命周期与组件一致，避免重复创建：

class _AccountingState extends State<Accounting> {
  DownloadPaper downloadPaper = DownloadPaper();
  // 为目标文件创建ValueNotifier，初始值先设为false，后续通过checkFile更新
  final ValueNotifier<bool> _accP1Nov2020Exists = ValueNotifier<bool>(false);

  @override
  void initState() {
    super.initState();
    // 初始化时检查文件状态并更新ValueNotifier
    _checkAndUpdateFileStatus(file_name.accP1Nov2020);
  }

  // 封装检查文件并更新ValueNotifier的方法
  Future<void> _checkAndUpdateFileStatus(String fileName) async {
    bool exists = await checkFile(fileName);
    _accP1Nov2020Exists.value = exists;
  }

  @override
  void dispose() {
    // 组件销毁时释放ValueNotifier
    _accP1Nov2020Exists.dispose();
    super.dispose();
  }
  // ... 其余代码
}

步骤2：修改ListTile中的FutureBuilder和ValueListenableBuilder

去掉FutureBuilder内部的ValueNotifier，直接使用State类中的实例，并在下载/删除完成后更新ValueNotifier的值：

ListTile(
  horizontalTitleGap: 2,
  title: const Text('Paper 1 (English)'),
  trailing: Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      // 仅用ValueListenableBuilder包裹下载图标按钮，实现局部刷新
      ValueListenableBuilder<bool>(
        valueListenable: _accP1Nov2020Exists,
        builder: (context, value, child) {
          return IconButton(
            onPressed: () async {
              await downloadPaper.downloadPaper(
                context,
                link.accP1Nov2020,
                file_name.accP1Nov2020,
              );
              // 下载完成后检查文件状态并更新ValueNotifier
              await _checkAndUpdateFileStatus(file_name.accP1Nov2020);
            },
            icon: const Icon(Icons.download_sharp),
            color: value ? Colors.blue : Colors.red,
            tooltip: 'Offline Download',
          );
        },
      ),
      IconButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (ctx) => Center(
              child: AlertDialog(
                title: const Text('Delete'),
                content: const Text('Delete from storage?'),
                actions: [
                  Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        ElevatedButton(
                          onPressed: () => Navigator.of(ctx).pop(),
                          child: const Text('No'),
                        ),
                        ElevatedButton(
                          onPressed: () async {
                            await downloadPaper.deleteFile(
                              context,
                              file_name.accP1Nov2020,
                            );
                            Navigator.of(ctx).pop();
                            // 删除完成后检查文件状态并更新ValueNotifier
                            await _checkAndUpdateFileStatus(file_name.accP1Nov2020);
                          },
                          child: const Text('Yes'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        icon: const Icon(Icons.delete_forever_outlined),
        tooltip: 'Delete',
      ),
    ],
  ),
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PdfViewer(
          subjectLink: link.accP1Nov2020,
        ),
      ),
    );
  },
)

步骤3：优化checkFile调用（可选）

如果checkFile是耗时操作，建议在initState中仅调用一次，避免FutureBuilder重复执行异步任务，上面的代码已经通过initState初始化完成这一步。

效果说明 #

• 现在下载或删除文件后，仅会更新单个下载图标按钮的颜色，不会触发整个组件树的重建。
• ValueNotifier的生命周期与组件绑定，不会出现重复创建导致的监听失效问题。

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