时间戳

首页 > 解决方案 > 如何在此 PieChart 上使用流

flutter - 如何在此 PieChart 上使用流

问题描述

我最近开始学习 Flutter，并在 Flutter 中学习了响应式编程（Learning it 实际上）。这就是我想要的，我有一个将地图作为输入并绘制它的 PieChart。（假设地图 map = { "Food" : 5, "Transportation" : 2} 我想要做的是有一个按钮，当我点击时会将食物增加 1，然后 PieChart 会重新呈现。（最终按钮将允许用户添加他们自己的字符串和 int 但现在我为测试进行硬编码）我的想法是用 StreamBuilder 包装一个 PieChart，当我们向该流添加输入时，它将监视一个流并重建 PieChart。我只是不知道如何正确实现它，我也不知道我是否应该让流接受地图，或者某个名为 deposit 的类，它有一个字符串和一个双精度值。这里'

import 'package:flutter/material.dart';
import 'package:pie_chart/pie_chart.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Map<String, double> dataMap = {"Food": 5, "Transportation": 3};

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Testing"),
        ),
        body: PieChart(dataMap: dataMap),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            dataMap["Food"] = dataMap["Food"] + 1;
          },
        ),
      ),
    );
  }
}

标签： flutter

解决方案

import 'package:flutter/material.dart';
import 'package:pie_chart/pie_chart.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Map<String, double> dataMap = {"Food": 5, "Transportation": 3};

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Testing"),
        ),
        body: PieChart(dataMap: dataMap),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(() => dataMap["Food"] += 1);

          },
        ),
      ),
    );
  }
}

您需要做的就是使用 setState 告诉小部件状态已更改。 https://docs.flutter.io/flutter/widgets/State/setState.html

这种模式的灵感来自 Reactjs。注意：不要将计算繁重的操作放在setState回调中

这是一个流的例子

https://github.com/flutter/plugins/blob/master/packages/sensors/example/lib/main.dart

我没有 Stream 功能，所以我无法编写代码。

推荐阅读