3

我正在发现 Flutter 和 bloc 模式，为了练习我正在制作一个关于比萨的应用程序。

我正在使用 aBlocProvider来访问块。它来自generic_bloc_provider包。它是使用 aInheritedWidget与 a 结合的基本实现StatelessWidget。

我有一个包含两个可编辑文本字段的页面，用于显示我想要创建的披萨的名称和价格。它由一个集团支持。

这是代码：

AddPizzaPage.dart ：

class AddPizzaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("Building AddPizzaPage");
    return Scaffold(
      appBar: AppBar(
        title: Text("Adding Pizza"),
      ),
      body: BlocProvider(
        bloc: AddPizzaBloc(),
        child: ModifyPizzaWidget(),
      ),
    );
  }
}

ListPage.dart：

class ModifyPizzaWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final addPizzaBloc = BlocProvider.of<AddPizzaBloc>(context);
    return Container(
      margin: EdgeInsets.all(16.0),
      child: Column(
        children: <Widget>[
          TextField(
            decoration: InputDecoration(hintText: "Nom de la pizza"),
            onChanged: (name) {
              addPizzaBloc.pizzaNameSink.add(name);
            },
          ),
          TextField(
            decoration: InputDecoration(hintText: "Prix de la pizza"),
            keyboardType: TextInputType.number,
            onChanged: (price) {
              addPizzaBloc.pizzaPriceSink.add(price);
            },
          ),
          IconButton(
            icon: Icon(Icons.check),
            iconSize: 40,
            onPressed: () {
              addPizzaBloc.evenSink.add(AddPizzaEvent.VALIDATE);
              Navigator.of(context).pop();
            },
          )
        ],
      ),
    );
  }
}

添加PizzaBloc.dart：

enum AddPizzaEvent {
  VALIDATE
}

class AddPizzaBloc extends Bloc {
  final _pizza = Pizza.empty();
  final _pizzaSubject = BehaviorSubject<Pizza>();
  final _repository = PizzaRepository();

  Sink<String> get pizzaNameSink => _pizzaNameController.sink;
  final _pizzaNameController = StreamController<String>();

  Sink<String> get pizzaPriceSink => _pizzaPriceController.sink;
  final _pizzaPriceController = StreamController<String>();

  Sink<AddPizzaEvent> get evenSink => _eventSink.sink;
  final _eventSink = StreamController<AddPizzaEvent>();

  AddPizzaBloc() {
    print("Created");
    _pizzaNameController.stream.listen(_addPizzaName);
    _pizzaPriceController.stream.listen(_addPizzaPrice);
    _eventSink.stream.listen(_onEventReceived);
  }

  dispose() {
    print("Disposed");
    _pizzaSubject.close();
    _pizzaNameController.close();
    _pizzaPriceController.close();
    _eventSink.close();
  }

  void _addPizzaName(String pizzaName) {
    _pizza.name = pizzaName;
    print(_pizza);
  }

  void _addPizzaPrice(String price) {
    var pizzaPrice = double.tryParse(price) ?? 0.0;
    _pizza.price = pizzaPrice;
    print(_pizza);
  }

  void _onEventReceived(AddPizzaEvent event) {
    print("Received $event");
    if (event == AddPizzaEvent.VALIDATE) {
      print(_pizza);
      _repository.addPizza(_pizza);
    }
  }
}

我的问题是我将正在构建的 Pizza 存储在块内，但小部件被重建，因此块被重建并且我失去了状态。

完整代码可在gitlab上找到

我不知道如何使用 bloc 为 addPizza 表单提供动力。

4

1 回答 1

6

发生这种情况是因为您在 build 方法中创建了 BLoC 的实例：

BlocProvider(
  bloc: Bloc(),
  child: ...
)

结果是任何重建都不会重用以前的实例（也有一些可怕的内存泄漏）。

解决方案是在 中StatefulWidget创建并创建该 BLoC 实例initState，然后进行dispose覆盖以清理事物。

但是由于您已经在使用包，因此您可以改用提供程序。这是一种流行的替代方案，可以完成上面列出的所有操作。

因此，您的BlocProvider用法变为：

StatefulProvider(
   valueBuilder: (_) =>  AddPizzaBloc(),
   dispose: (_, bloc) => bloc.dispose(),
   child: // ...
),

然后这样获得：

Provider.of<AddPizzaBloc>(context);
于 2019-02-04T23:20:56.883 回答