添加数据时如何自动更新条形图？

Question

我想在用户提交新数据时自动更新条形图。我不想使用 RefreshIndicator 因为在这种情况下用户应该拉直到数据更新。我想在不上拉的情况下更新条形图，我想在用户添加新数据时自动更新。请找到我的以下代码：

Widget build(BuildContext context) {
    print('build() Chart');
    return AspectRatio(
      aspectRatio: 1,
      child: Card(
        elevation: 6,
        margin: EdgeInsets.all(10),
        child: Container(
          padding: EdgeInsets.all(8),
          child: Stack(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
                        child: BarChart(
                          isPlaying ? randomData() : mainBarData(),
                          swapAnimationDuration: animDuration,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 12,
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Align(
                  alignment: Alignment.topRight,
                  child: IconButton(
                    icon: Icon(
                      isPlaying ? Icons.pause : Icons.play_arrow,
                      color: const Color(0xff0f4a3c),
                    ),
                    onPressed: () {
                      setState(() {
                        isPlaying = !isPlaying;
                        if (isPlaying) {
                          refreshState();
                        }
                      });
                    },
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }  

List<BarChartGroupData> showingGroups() => List.generate(7, (i) {
        print("Switchhhhhh");
        switch (i) {
          case 0:
            return makeGroupData(0, total_Monday, isTouched: i == touchedIndex);
          case 1:
            return makeGroupData(1, total_Tuesday,
                isTouched: i == touchedIndex);
          case 2:
            return makeGroupData(2, total_Wednesday,
                isTouched: i == touchedIndex);
          case 3:
            return makeGroupData(3, total_Thursday,
                isTouched: i == touchedIndex);
          case 4:
            return makeGroupData(4, total_Friday, isTouched: i == touchedIndex);
          case 5:
            return makeGroupData(5, total_Saturday,
                isTouched: i == touchedIndex);
          case 6:
            return makeGroupData(6, total_Sunday, isTouched: i == touchedIndex);
          default:
            return null;
        }
      });

Answer 1

如果没有所有代码，很难说您的某些函数做了什么，以及您使用的是无状态小部件还是有状态小部件，但我猜测 randomData 和 mainBarData 会生成您的条形图。

要实现您所寻求的动态行为，您的基础数据需要是有状态的。这可以通过多种方式实现，但最简单的内置方式是使用 StatefulWidget 来改变您的数据源。然后，确保用于从基础数据生成图形的函数位于 build 方法中，以便在基础数据更改时更新这些函数的结果。

Here is an example of a StatefulWidget in action，而是用于将项目添加到列表中。这些概念应该适用于您的情况。

相关：how to make dynamic chart in flutter?