Flutter如何访问修改跨文件变量 更改静态颜色后界面未生效怎么办

• setState 只会触发当前所属的StatefulWidget的build方法重绘，你修改全局静态变量后，用到colors.bgColor的Scaffold所属的Widget没有触发重绘，所以界面不会更新
• 你当前定义的静态bgColor没有状态监听能力，值变更后无法主动通知所有使用它的组件刷新界面

使用Flutter内置的ValueNotifier实现状态监听，修改步骤如下：

1. 修改colors.dart代码，将静态颜色改为ValueNotifier类型：

import 'package:flutter/material.dart';

// 类名使用大驼峰符合Dart命名规范，避免和系统自带Colors类冲突
class AppColors {
  static final ValueNotifier<Color> bgColor = ValueNotifier(Color(0xfff8f8f8));
}

2. 在使用bgColor的组件外层包裹ValueListenableBuilder，实现值变化自动刷新：

MaterialApp(
  home: ValueListenableBuilder<Color>(
    // 监听全局颜色变量
    valueListenable: AppColors.bgColor,
    builder: (context, currentBgColor, child) {
      return Scaffold(
        // 直接使用builder返回的当前颜色值
        backgroundColor: currentBgColor,
        // 其余Scaffold配置保持不变
        ...
      );
    }
  )
)

3. 修改按钮点击逻辑，不需要调用setState，直接修改ValueNotifier的value属性即可：

onPressed: () {
  AppColors.bgColor.value = Color(0xff313131);
},

如果项目中存在大量需要全局共享的状态，可以考虑使用Provider、Riverpod、Bloc等状态管理框架实现全局状态的统一管理和监听。

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