Flutter滚动时ListView内Card中fl_chart图表闪烁、内容随机消失问题求助

云上老周

2026-10-21

问题原因

这是滚动触发组件不必要重建+fl_chart重绘逻辑冲突共同导致的：

滚动时ListView会触发子组件重绘，你每次build都调用calculateValues(items)生成新的data实例，ValuesChart没有唯一标识，Flutter组件diff算法判定为新组件，会销毁旧组件重新创建，就会出现闪烁、内容消失的情况。
fl_chart默认没有独立绘制边界，会跟随父滚动视图的重绘逻辑频繁刷新，也会导致闪烁。

修复步骤

给ValuesChart加RepaintBoundary和Key，隔离绘制区域，同时让Flutter能正确识别组件：

SizedBox(
  height: 300,
  child: RepaintBoundary(
    child: ValuesChart(
      key: ValueKey(data.hashCode), // 用data的哈希值做唯一标识
      data: data
    ),
  )
)

缓存计算好的图表数据，不要每次build都调用calculateValues(items)：
如果当前是StatefulWidget，把数据计算放到initState或者didUpdateDependencies里，用变量存起来，build的时候直接用缓存好的数据。
把buildChartBox改成独立的StatelessWidget，不要用普通方法构建组件，加const构造减少不必要重建：

class ChartBox extends StatelessWidget {
  final Map<String, int> chartData;
  const ChartBox({super.key, required this.chartData});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              chartTitles(title: 'Items', subtitle: 'by value'),
              SizedBox(
                height: 300,
                child: RepaintBoundary(
                  child: ValuesChart(
                    key: ValueKey(chartData.hashCode),
                    data: chartData,
                  ),
                )
              )
            ],
          ),
        ),
      ),
    );
  }
}