如何防止charts_flutter中setState()上的指示点消失

Question

当更新charts_flutter TimeSeriesChart中的数据序列时，指示点消失。This link建议了一种可能的解决方法，但到目前为止我还没有能够实现它，因为解释没有提供完整的示例。有谁能够做到这一点的例子吗？具体地说，我试图在更新Text小部件的同时维护图形线上的指示点。

TimeSeriesChart代码：

new charts.TimeSeriesChart(
  getSeries(reading),
  dateTimeFactory: new charts.UTCDateTimeFactory(),
  animate: false,
  selectionModels: [
    new charts.SelectionModelConfig(
      changedListener: _onSelectionChanged,
    )
  ],
  behaviors: [
    new charts.LinePointHighlighter(
      defaultRadiusPx: 20.0,
      radiusPaddingPx: 20.0,
      showHorizontalFollowLine:
        charts.LinePointHighlighterFollowLineType.nearest,
      showVerticalFollowLine:
        charts.LinePointHighlighterFollowLineType.nearest
    ),
    new charts.SelectNearest(
      eventTrigger: charts.SelectionTrigger.tapAndDrag
    )
  ],
  primaryMeasureAxis: ...
  domainAxis: ...

然后是_onSelectionChanged的代码

_onSelectionChanged(charts.SelectionModel model) {
  final selectedDatum = model.selectedDatum;

  DateTime time;
  final measures = <String, num>{};
  num value;
  if (selectedDatum.isNotEmpty) {
    time = selectedDatum.first.datum.time;
    value = selectedDatum.first.datum.value;

    selectedDatum.forEach((charts.SeriesDatum datumPair) {
      measures[datumPair.series.displayName] = datumPair.datum.value;
      if (!datumPair.series.id.contains("min") && !datumPair.series.id.contains("max"))
        value = datumPair.datum.value;
    });
  }
  setState(() {
    _time = time;
    _measures = measures;
    _value = value; // This is the value that is used within the `Text` widget
  });
}

Answer 1

我是如何让它工作的：

class InnerStatefulWidget extends StatefulWidget {
    final List<charts.Series<T, DateTime>> seriesList; //where T is the class used to create the series

    InnerStatefulWidget(this.seriesList);

    factory InnerStatefulWidget.withSampleData(D apiData) { // where D is the class for the data from API
        return new InnerStatefulWidget(
          _createSeriesData(apiData) // the function that receives data from the API and converts it into series
        );
    }

    static List<charts.Series<T, DateTime>> _createSeriesData(D apiData) {
        return new charts.Series<T, DateTime>(
            id: CHART_ID,
            domainFn: (T x, _) => x.dateTime,
            measureFn: (T x, _) => x.value,
            data: apiData));
     }

    @override
    _InnerStatefulWidgetState createState() => _InnerStatefulWidgetState();
}

class _InnerStatefulWidgetState extends State<InnerStatefulWidget> {
    @override
    Widget build(BuildContext context) {
        return new charts.TimeSeriesChart(
          widget.seriesList,
          ...
          selectionModels: [
            new charts.SelectionModelConfig(
              type: charts.SelectionModelType.info,
              changedListener: _onSelectionChanged,
            )
          ],
        );
    }

    void _onSelectionChanged(charts.SelectionModel model) {
        ...
    }
}

class OuterStatefulWidget extends StatefulWidget {
  D apiData;

  OuterStatefulWidget(this.apiData);

  @override
  _OuterStatefulWidgetState createState() => _OuterStatefulWidgetState();
}

class _OuterStatefulWidgetState extends State<OuterStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return InnerStatefulWidget.withSampleData(widget.apiData); 
  }
}

Answer 2

确保在每次调用build方法时都将相同的“序列”实例传递给图表小部件-例如，通过将其初始化为late实例字段：

class _YourChartContainerState extends State<YourChartContainer> {
  
  late series = getSeries(reading);

  @override
  Widget build(BuildContext context) {
    return new charts.TimeSeriesChart(
      series,
      // further parameters omitted...
      );
  }
}

这样，图表小部件将被重用/回收，并保持其选择状态。