如何在 Flutter 中每 5 秒重复一次 Widget？

Question

我想每 5 秒刷新一次图表小部件，但是，在这里我做错了，但我不知道我错过了什么或我做错了什么。我只看到了一个视图中的白屏。

我在createRandomData 中有一个虚拟数据

调用 createRandomData

factory PieChartScreen.withRandomData(){
    Timer.periodic(Duration(seconds: 5), (timer) {
      return PieChartScreen(
        createRandomData(),
      );
    });
  }

完整源代码PieChartScreen

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'dart:math';
import 'dart:async';

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

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

  factory PieChartScreen.withSampleData(){
    return new PieChartScreen(
      createSampleData(),
      animate: false,
    );
  }

  factory PieChartScreen.withRandomData(){
    Timer.periodic(Duration(seconds: 5), (timer) {
      return PieChartScreen(
        createRandomData(),
      );
    });
  }

  static List<charts.Series<Spending, int>> createRandomData() {
    Timer.periodic(Duration(seconds: 5), (timer) {
      final random = new Random();

      final data = [
        new Spending(2014, random.nextInt(1000000)),
        new Spending(2015, random.nextInt(1000000)),
        new Spending(2016, random.nextInt(1000000)),
        new Spending(2017, random.nextInt(1000000)),
        new Spending(2018, random.nextInt(1000000)),
        new Spending(2019, random.nextInt(1000000)),
      ];

      return [
        new charts.Series(id: 'Spending',
            data: data,
            domainFn: (Spending sp, _) => sp.year,
            measureFn: (Spending sp, _) => sp.spending,
            labelAccessorFn: (Spending sp, _) => '${sp.year} : ${sp.spending}'
        )
      ];
//    Timer timer = new Timer.periodic(Duration(seconds: 2));

    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
          title: Text("Pie Chart Screen")
      ),
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: new charts.PieChart(seriesList,
          animate: animate,
          defaultRenderer: new charts.ArcRendererConfig(
              arcRendererDecorators: [
                new charts.ArcLabelDecorator(
                    labelPosition: charts.ArcLabelPosition.auto)
              ]),
        ),
      ),
    );
  }

  static List<charts.Series<Spending, int>> createSampleData() {
    final data = [
      new Spending(2014, 5),
      new Spending(2014, 25),
      new Spending(2014, 50),
      new Spending(2014, 100),
      new Spending(2014, 75),
      new Spending(2014, 25),
    ];

    return [
      new charts.Series(id: 'Spending',
          data: data,
          domainFn: (Spending sp, _) => sp.year,
          measureFn: (Spending sp, _) => sp.spending,
          labelAccessorFn: (Spending sp, _) => '${sp.year} \n : ${sp.spending}'
      )
    ];
  }
}

class Spending {
  final int year;
  final int spending;

  Spending(this.year, this.spending);
}

我希望小部件可以每 5 秒刷新一次。

Answer 1

我会将我的 PieChartScreen 更改为 Stateful Widget。

class PieChartScreen extends StatelessWidget {

类似这样的伪代码：

class PieChartScreen extends StatefulWidget {
List<charts.Series> seriesList;
.....

int changeCounter=0;
.....

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

class PieChartScreenState extends State<PieChartScreen> {
  PieChartScreenState() {}

....

 factory PieChartScreen.withRandomData(){
    Timer.periodic(Duration(seconds: 5), (timer) {
      return PieChartScreen(
        setState (() {.  // NOTE
          createRandomData(),
          changeCounter=changeCounter+1;  // NOTE
        }); // NOTE
       );
    });
  }

....

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
          title: Text("Pie Chart Screen")
      ),
      body: changeCounter == 0 ? CircularProgressIndicator() : // NOTE
         Padding(
            padding: EdgeInsets.all(8.0),
            child: new charts.PieChart(seriesList,
            animate: animate,
             defaultRenderer: new charts.ArcRendererConfig(
              arcRendererDecorators: [
                new charts.ArcLabelDecorator(
                    labelPosition: charts.ArcLabelPosition.auto)
              ]),
        ),
      ),
    );
  }

}

注意 PieChartScreen 到 StateFulWidget 的变化以及 changeCounter 变量的包含，在这种情况下，我只是为了示例而使用了一个 int，在 setState 构造中用于指示数据状态的变化，这应该反映在 Widget 树和 Build 方法本身中。