Flutter主题切换异常：ExpansionTile颜色仅热重载后更新

你的问题核心是ExpansionTile的backgroundColor未随主题切换即时更新，其他组件正常说明主题切换逻辑本身是生效的，问题出在ExpansionTile的颜色绑定方式上。以下是具体排查和解决方法：

原因分析 #

直接在ExpansionTile的backgroundColor属性中硬写Theme.of(context).colorScheme.primary，虽然初始启动和热重载时能正确获取主题色，但主题切换时，ExpansionTile的状态未触发重建，导致颜色值未刷新。

解决方案 #

方案1：通过主题配置统一设置（推荐） #

在亮色/暗色主题中直接配置ExpansionTile的默认样式，主题切换时会自动应用对应颜色，无需手动设置backgroundColor：

// 亮色主题
ThemeData lightTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.green,
    brightness: Brightness.light,
  ),
  // 新增ExpansionTile主题配置
  expansionTileTheme: ExpansionTileThemeData(
    backgroundColor: ColorScheme.fromSeed(seedColor: Colors.green).primary,
  ),
  // ...其他设置
);

// 暗色主题
ThemeData darkTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.blue,
    brightness: Brightness.dark,
  ),
  expansionTileTheme: ExpansionTileThemeData(
    backgroundColor: ColorScheme.fromSeed(seedColor: Colors.blue).primary,
  ),
  // ...其他设置
);

修改ExpansionTile代码，移除手动设置的backgroundColor：

ExpansionTile(
  expandedAlignment: Alignment.topLeft,
  // ...其他配置
)

方案2：确保ExpansionTile获取最新主题上下文 #

若需保留手动设置颜色的方式，用Builder包裹ExpansionTile，确保它能获取到主题切换后的最新上下文：

Builder(
  builder: (context) {
    return ExpansionTile(
      backgroundColor: Theme.of(context).colorScheme.primary,
      expandedAlignment: Alignment.topLeft,
      // ...其他配置
    );
  },
)

方案3：在页面层级监听主题变化 #

如果ExpansionTile所在页面是StatefulWidget，确保页面能监听ThemeManager的变化并触发重建：

class TestPageViewState extends State<TestPageView> {
  late ThemeManager _themeManager;

  @override
  void initState() {
    super.initState();
    _themeManager = Provider.of<ThemeManager>(context, listen: false);
    _themeManager.addListener(_onThemeChanged);
  }

  @override
  void dispose() {
    _themeManager.removeListener(_onThemeChanged);
    super.dispose();
  }

  void _onThemeChanged() {
    if (mounted) setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ...页面内容，包含ExpansionTile
    );
  }
}

验证要点 #

切换主题后观察ExpansionTile背景色是否即时变化，若仍有问题，检查：

• MaterialApp是否正确绑定themeMode: _themeManager.themeMode
• ThemeManager的toggleTheme方法是否正确调用了notifyListeners()

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