时间戳

首页 > 解决方案 > 如何在 Flutter 中使用 bloc 模式在 UI 上显示函数回调和错误？

dart - 如何在 Flutter 中使用 bloc 模式在 UI 上显示函数回调和错误？

问题描述

块飞镖

class Bloc{
Bloc(){
additionalController.stream.listen(onAdd);
}

void dispose() async {
additionalController.close();
_itemAdd.close();
}

final additionalController = StreamController<Data>();
Sink<Data> get addItem => additionalController.sink;

Stream<String> get addGet => _itemAdd.stream;
final _itemAdd = BehaviorSubject<String>();

void onAdd(Data data) {
_addWork(data);
}

Future<Null> _addWork(Data data) async {

//work

}).whenComplete(() {

_itemAdd.add("complete work");

}).catchError((e) {
_itemAdd.addError("Error in Adding Data");
  });
 }
}

asbloc应该只用于处理业务逻辑，而错误处理部分与业务逻辑无关。

如何在 UI 上显示 bloc 的回调和错误。我不认为StreamBuilder是唯一的解决方案。

如果我们使用StreamBuilder，这样，每次重建发生时，我们都会重复地向 bloc 发送回调，这没有任何意义。

有正确的方法吗？

先感谢您！！

标签： dartflutter

解决方案

到目前为止对我有用的是使用代表回调的接口。

abstract class AddItemDelegate {
  void onSuccess();
  void onError(String message);
}

然后在bloc如下使用它：

class Bloc {
  AddItemDelegate _delegate;
  // ...
  Function addItem(Data item, AddItemDelegate delegate) => () {
    _delegate = delegate;
    additionalController.sink.add(item);
  }
  // ...
  Future<Null> _addWork(Data data) async {
    try {
      final work = await //work...
      _itemAdd.add("complete work");
      _delegate?.onSuccess();
    }
    catch(e) {
      final error = "Error in Adding Data";
      _itemAdd.addError(error);
      _delegate?.onError(error);
    }
  }
}

然后在您的StatefulWidget（或StatelessWidget）上，您可以执行以下操作：

class MyWidget extends StatelessWidget implements AddItemDelegate {
  @override
  void onSuccess() {
    // e.g.: Show a dialog or navigate to other screen
  }

  @override
  void onError(String message) {
    // e.g.: Show an error dialog
  }

  @override
  Widget build(BuildContext context) {
    final bloc = // ...
    final data = // ...
    return MaterialButton(
        child: Text("Add Item"), 
        onPressed: bloc.addItem(data, this));
  }
}

这样就可以在使用 BLoC 模式时使用回调。

推荐阅读