如何使用Flutter在恢复状态下重建StreamBuilder

问题描述

我使用BLoC模式开发了一个应用程序。在我的应用中，有2条路线，路线A和B，并且它们都访问相同的数据。如下移动路线时引起的问题。

从显示数据的路线A移动到路线B。
更新路线B上的数据。
返回路线A。

返回路线A后，显示数据的StreamBuilder永远不会自动更新。如何让StreamBuilder在恢复状态下更新？

这是示例代码。

routeA.dart

class RouteA extends StatefulWidget {
  @override
  _RouteAState createState() => _RouteAState();
}

class _RouteAState extends State<RouteA> {
  @override
  Widget build(BuildContext context) {
    final bloc = Bloc();
    return Column(
      children: [
        StreamBuilder(    // this StreamBuilder never updates on resumed state
            stream: bloc.data,// mistake,fixed. before: bloc.count
            builder: (_,snapshot) => Text(
                  snapshot.data ?? "",)),RaisedButton(
          child: Text("Move to route B"),onpressed: () {
            Navigator.of(context).pushNamed("routeB");
          },),],);
  }
}

routeB.dart

class RouteB extends StatefulWidget {
  @override
  _RouteBState createState() => _RouteBState();
}

class _RouteBState extends State<RouteB> {
  @override
  Widget build(BuildContext context) {
    final bloc = Bloc();
    return Center(
      child: RaisedButton(
        child: Text("Update data"),onpressed: () {
          bloc.update.add(null);
        },);
  }
}

bloc.dart

class Bloc {
  Stream<String> data;
  Sink<void> update;
  Model _model;
  
  Bloc() {
    _model = Model();
    
    final update = PublishSubject<void>();
    this.update = update;
    
    final data = BehaviorSubject<String>(seedValue: "");
    this.data = data;
    
    update.map((event) => _model.update()).listen((event) => data.sink.add(_model.getData()));
  }
}

model.dart

class Model {
  static Model _model;

  factory Model() {    // model is singleton.
    _model ??= Model._();
    return _model;
  }

  Model._();

  int _data = 0;

  void update() {
    _data++;
  }

  String getData() {
    return _data.toString();
  }
}

解决方法

StreamBuilder会在数据更改时更新数据，而不仅仅是调用stream

RouteA

class RouteA extends StatefulWidget {
  @override
  _RouteAState createState() => _RouteAState();
}

class _RouteAState extends State<RouteA> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        StreamBuilder(    // this StreamBuilder never updates on resumed state
            stream: bloc.data,// mistake,fixed. before: bloc.count
            builder: (_,snapshot) => Text(
              snapshot.data ?? "",)),RaisedButton(
          child: Text("Move to route B"),onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {
              return RouteB();
            }));
          },),],);
  }
}

路线B

class RouteB extends StatefulWidget {
  @override
  _RouteBState createState() => _RouteBState();
}

class _RouteBState extends State<RouteB> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text("Update data"),onPressed: () {
          bloc.updateData();
        },);
  }
}

集团

class Bloc {
  final _update = PublishSubject<String>();
  Model _model = Model();
  Stream<String> get data => _update.stream;

  void updateData() async {
    _model.update();
    _update.sink.add(_model.getData());

    _update.stream.listen((event) {
      print(event);
    });
  }

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

final bloc = Bloc();

只需遵循上述更改，它将为您解决问题。

dart reactive-programming