Flutter中ListView内Card主题颜色切换后无法实时更新问题

ListView.builder会复用已创建的列表项组件，当切换ThemeMode时，视口中已存在的列表项不会触发build方法，导致Theme.of(context)获取的仍是旧主题的配色，只有当列表项滚出视口被销毁、再次滚入重建时，才会加载新主题的颜色。

方案1：给列表组件绑定主题相关的Key #

通过给MyList组件传递与_themeMode绑定的ValueKey，主题切换时会触发MyList的重建，进而让所有列表项重新build并获取新主题颜色：

修改MainApp中MyList的调用代码：

Expanded(child: MyList(key: ValueKey(_themeMode)))

MyList组件无需额外修改，其构造函数已默认支持接收key参数。

方案2：用AnimatedBuilder监听主题变化 #

在列表项的构建逻辑中使用AnimatedBuilder，将Theme.of(context)作为动画依赖，主题变化时会自动重建Card组件，无需刷新整个列表：

修改MyList的itemBuilder：

itemBuilder: (context, index) {
  return AnimatedBuilder(
    animation: Theme.of(context),
    builder: (context, child) {
      return Card(
        color: Theme.of(context).colorScheme.surfaceContainer,
        child: child,
      );
    },
    child: ListTile(
      title: Text('Item $index'),
    ),
  );
}

方案对比 #

• 方案1实现简单，适合列表数据量不大的场景；
• 方案2更高效，仅更新需要主题适配的Card组件，适合大数据量的列表。

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