滚动时环形图表重复渲染问题求助（附代码）

我之前也遇到过一模一样的问题！根源其实很简单：你每次调用build方法时，都新建了ArcRendererConfig和ArcLabelDecorator的实例——Flutter的Widget diff算法会把每次新创建的对象判定为不同配置，哪怕参数完全一致，也会触发图表的重新渲染。

要保留你的环形配置同时解决重渲染问题，只需要把这些配置对象提取成静态常量，让每次build都复用同一个实例就行。

修改后的代码示例： #

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'package:flutter_basf_hk_app/model/LinearSales.dart';

// 提取为全局静态常量，确保全程复用同一个对象引用
final _pieChartRendererConfig = charts.ArcRendererConfig(
  arcWidth: 60,
  arcRendererDecorators: [charts.ArcLabelDecorator()],
);

class PieOutsideLabelChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  PieOutsideLabelChart(this.seriesList, {this.animate});

  factory PieOutsideLabelChart.withSampleData(List<LinearSales> data, bool isAnimation) {
    return PieOutsideLabelChart(
      _createSampleData(data),
      animate: isAnimation,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: charts.PieChart(
        seriesList,
        animate: animate,
        // 直接复用预定义的静态配置实例
        defaultRenderer: _pieChartRendererConfig,
      ),
    );
  }

  static List<charts.Series<LinearSales, int>> _createSampleData(List<LinearSales> data) {
    print('=========PIE==========_createSampleData=====');
    return [
      charts.Series<LinearSales, int>(
        id: 'Sales',
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: data,
        colorFn: (LinearSales sales, _) => sales.color,
        labelAccessorFn: (LinearSales sales, _) => '${sales.sales}',
      )
    ];
  }
}

为什么这样能解决问题？ #

Flutter判断Widget是否需要更新，核心依赖对象引用的相等性。当你在build里每次new一个ArcRendererConfig，哪怕参数完全相同，它也是一个全新的对象——图表组件会误以为配置发生了变化，从而触发完整的重渲染流程。

把配置提取成静态常量后，每次传递给PieChart的都是同一个对象引用，Flutter的diff算法会判定配置未改变，自然就不会触发不必要的重渲染了。

你可以测试一下修改后的代码：滚动页面时，那条_createSampleData的日志不会再反复打印，同时环形宽度和标签装饰器的效果也完全保留。

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