Flutter中Redux Store更新环形图表标签失效问题求助

看起来你遇到的核心问题是Redux状态更新后，AnimatedCircularChart的文本和字体大小没有同步更新——虽然你能在converter和builder里打印出正确的角度值，但Widget的属性始终没跟上。问题主要出在两个地方：

1. 错误地在StoreConnector的converter里调用setState #

StoreConnector本身的设计就是当Redux状态变化时，自动重新执行builder方法更新UI。你在converter里调用setState不仅违背了Redux的单向数据流原则，还会触发额外的State重绘，干扰StoreConnector的正常更新逻辑，导致Widget属性和状态出现不同步。

2. 冗余的本地状态_angle #

你维护了本地状态_angle来同步Redux的角度值，但完全没必要——builder方法已经会接收最新的angle参数，直接用这个参数就能保证拿到最新值，不需要额外同步到本地状态。

修正后的代码 #

我把你的代码做了精简和修复，移除了冗余的本地状态，去掉了错误的setState调用：

class CurrentTabPageState extends State<CurrentTabPage> {
  final GlobalKey<AnimatedCircularChartState> _chartKey = GlobalKey<AnimatedCircularChartState>();
  List<CircularStackEntry> data = <CircularStackEntry>[
    CircularStackEntry(
      <CircularSegmentEntry>[
        CircularSegmentEntry(50.0, Colors.red[200], rankKey: 'Q1'),
        CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2')
      ],
      rankKey: 'Quarterly Profits',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return StoreConnector<ReduxState, double>(
      // 只做数据转换，不做状态更新操作
      converter: (store) => store.state.angle,
      builder: (context, angle) {
        final int angleInt = angle.toInt();
        print(angleInt); // 这里依然可以打印最新的角度值
        return AnimatedCircularChart(
          key: _chartKey,
          size: const Size(300.0, 300.0),
          initialChartData: data,
          chartType: CircularChartType.Radial,
          holeLabel: '$angleInt', // 直接使用builder传来的最新角度值
          labelStyle: TextStyle(
            color: Colors.blueGrey[600],
            fontWeight: FontWeight.bold,
            fontSize: (angle * 10).roundToDouble(), // 用最新的angle计算字体大小
          ),
        );
      },
    );
  }
}

额外说明 #

如果之后你需要根据角度值更新环形图表的扇形数据（比如动态改变各段的数值），可以通过_chartKey主动触发图表更新：

// 在需要更新数据的地方调用
_chartKey.currentState?.updateData(updatedData);

这样修改后，Redux状态更新时，StoreConnector会自动调用builder传递最新的angle值，AnimatedCircularChart的holeLabel和fontSize就会同步更新了。

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