flutter - StreamBuilder 没有重新渲染里面的小部件？

Question

我创建了这段代码，我想要发生的是当我按下按钮时我希望饼图用新值重新渲染(应该是旧值但食物值增加 1)我正在使用 pie_chart: 0.8.0 包中的饼图。Deposit 只不过是一个 pojo(String 类和 int deposit)bloc.dart 包含 bloc 的全局实例、流的 getter 和类型流的初始化这是我的代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'bloc Chart',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  Map<String, double> datamap = new Map();

  @override
  Widget build(BuildContext context) {
    datamap.putIfAbsent("Food", () => 5);
    datamap.putIfAbsent("transportation", () => 3);
    return Scaffold(
      appBar: AppBar(
        title: Text("PieChart using blocs"),
      ),
      body: Column(
        children: <Widget>[
          StreamBuilder<Deposit>(
              stream: bloc.data, //A stream of Deposit data
              builder: (context, snapshot) {
                addDeposit(Deposit("Food", 1), datamap);
                debugPrint("Value of food in map is: ${datamap["Food"]}");
                return PieChart(dataMap: datamap);
              }),
          SizedBox.fromSize(
            size: Size(20, 10),
          ),
          RaisedButton(
            onPressed: () {
              bloc.add(Deposit("Food", 1)); //returns the stream.add
            },
            child: Icon(Icons.add),
          ),
        ],
      ),
    );
  }

  void addDeposit(Deposit dep, Map<String, double> map) {
    if (map.containsKey(dep.category)) {
      map.update(dep.category, (value) => value + dep.price);
    } else
      map.putIfAbsent(dep.category, () => dep.price);
  }
}

Answer 1

我认为您的问题是流不会触发新事件。您不必关闭流即可重建。我在您的代码中看不到您触发流的新事件的任何地方。检查下面的代码，了解如何使用 StreamBuilder 更新 StatelessWidget 的简单方法。

class CustomWidgetWithStream extends StatelessWidget {
  final CustomBlock block = CustomBlock();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        StreamBuilder(
            stream: block.stream,
            builder: (context, stream) {
              return Text("${stream.data.toString()}");
            }),
        RaisedButton(
          onPressed: () {
            block.incrementNumber();
          },
          child: Text("Increment"),
        )
      ],
    );
  }
}

class CustomBlock {
  num counter = 10;
  final StreamController<num> _controller = StreamController();

  Stream<num> get stream => _controller.stream;

  CustomBlock() {
    _controller.onListen = () {
      _controller.add(counter); // triggered when the first subscriber is added
    };
  }

  void incrementNumber() {
    counter += 1;
    _controller.add(counter); // ADD NEW EVENT TO THE STREAM
  }

  dispose() {
    _controller.close();
  }
}

虽然这是一个有效的代码片段，但我强烈建议将您的小部件从 StatelessWidget 更改为 StatefulWidget，原因有二:* 如果您“照章办事”，如果小部件自行更改内容，则它不是 StatelessWidget，无状态小部件仅显示提供给它的数据。在您的情况下，小部件正在处理水龙头，然后决定下一步做什么以及如何更新自身。* 如果你正在使用流，在有状态的小部件中你可以安全地关闭流，正如你在上面的代码中看到的，没有安全的方法来关闭流。如果您不关闭流，可能会出现不需要的行为甚至崩溃。