flutter - 使用 BLoC 模式和 StatelessWidget 时如何调用 dispose

Question

我试图理解 BLoC 模式，但我无法弄清楚在我的示例中何时何地调用 dispose()。

我正在尝试了解 Flutter 中的各种状态管理技术。

我提出了一个使用 StatefulWidget、scoped_model 和流构建的示例。

我相信我终于想出了如何使用“BloC”模式使我的示例工作，但是我在调​​用 dispose() 方法时遇到问题，因为我只使用 StatelessWidgets。

我尝试将 PageOne 和 PageTwo 转换为 StatefulWidget 并调用 dispose() 但最终在页面之间移动时过早地关闭了流。

在我的示例中，我是否完全不必担心手动关闭流？

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<ThemeData>(
      initialData: bloc.themeProvider.getThemeData,
      stream: bloc.streamThemeDataValue,
      builder: (BuildContext context, AsyncSnapshot<ThemeData> snapshot) {
        return MaterialApp(
          title: 'bloc pattern example',
          theme: snapshot.data,
          home: BlocPatternPageOne(),
        );
      },
    );
  }
}

// -- page_one.dart

class BlocPatternPageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('(block pattern) page one'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            buildRaisedButton(context),
            buildSwitchStreamBuilder(),
          ],
        ),
      ),
    );
  }

  StreamBuilder<bool> buildSwitchStreamBuilder() {
    return StreamBuilder<bool>(
            initialData: bloc.switchProvider.getSwitchValue,
            stream: bloc.streamSwitchValue,
            builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
              return Switch(
                value: snapshot.data,
                onChanged: (value) {
                  bloc.sinkSwitchValue(value);
                },
              );
            },
          );
  }

  Widget buildRaisedButton(BuildContext context) {
    return RaisedButton(
            child: Text('go to page two'),
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context) {
                    return BlocPatternPageTwo();
                  },
                ),
              );
            },
          );
  }
}

// -- page_two.dart

class BlocPatternPageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('(bloc pattern) page two'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            buildRaisedButton(context),
            buildSwitchStreamBuilder(),
          ],
        ),
      ),
    );
  }

  StreamBuilder<bool> buildSwitchStreamBuilder() {
    return StreamBuilder<bool>(
            initialData: bloc.switchProvider.getSwitchValue,
            stream: bloc.streamSwitchValue,
            builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
              return Switch(
                value: snapshot.data,
                onChanged: (value) {
                  bloc.sinkSwitchValue(value);
                },
              );
            },
          );
  }

  Widget buildRaisedButton(BuildContext context) {
    return RaisedButton(
            child: Text('go back to page one'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          );
  }
}

// -- bloc.dart

class SwitchProvider {
  bool _switchValue = false;

  bool get getSwitchValue => _switchValue;

  void updateSwitchValue(bool value) {
    _switchValue = value;
  }
}

class ThemeProvider {
  ThemeData _themeData = ThemeData.light();

  ThemeData get getThemeData => _themeData;

  void updateThemeData(bool value) {
    if (value) {
      _themeData = ThemeData.dark();
    } else {
      _themeData = ThemeData.light();
    }
  }
}

class Bloc {
  final StreamController<bool> switchStreamController =
      StreamController.broadcast();
  final SwitchProvider switchProvider = SwitchProvider();

  final StreamController<ThemeData> themeDataStreamController =
      StreamController();
  final ThemeProvider themeProvider = ThemeProvider();

  Stream get streamSwitchValue => switchStreamController.stream;
  Stream get streamThemeDataValue => themeDataStreamController.stream;

  void sinkSwitchValue(bool value) {
    switchProvider.updateSwitchValue(value);
    themeProvider.updateThemeData(value);
    switchStreamController.sink.add(switchProvider.getSwitchValue);
    themeDataStreamController.sink.add(themeProvider.getThemeData);
  }

  void dispose() {
    switchStreamController.close();
    themeDataStreamController.close();
  }
}

final bloc = Bloc();

目前一切正常，但是，我想知道我是否应该担心手动关闭流或让 Flutter 自动处理它。

如果我应该手动关闭它们，在我的例子中你什么时候调用 dispose()？

Answer 1

你可以使用 flutter 的 provider 包。它具有用于处置的回调，您可以在其中处置您的 Bloc 。提供者是继承的小部件，并提供了一种管理区 block 的简洁方法。顺便说一句，我只将无状态小部件与提供程序和流一起使用。