在 Bloc 中合并流

Question

我的圈子里有几个流。我不确定这是否是一种正确的方法，因为我是 Flutter 和 Bloc 模式的新手。但是如何将 Bloc 中的流合并为一个？

欢迎提供有关该主题的任何提示...

我的 Bloc 文件

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

class WelcomeBloc {
  final _controller = PublishSubject<PageController>();
  final _page = PublishSubject<int>();
  final _lastPage = PublishSubject<bool>();

  Stream<dynamic> get combinedStream =>
      CombineLatestStream.list([getController, currentPage, isLastPage]);

  Stream<PageController> get getController => _controller.stream;
  Stream<int> get currentPage => _page.stream;
  Stream<bool> get isLastPage => _lastPage.stream;

  updatePage(int page) {
    _page.sink.add(page);
  }

  updatePageState(bool state) {
    _lastPage.sink.add(state);
  }

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

final welcomeBloc = WelcomeBloc();

消费者

import 'package:flutter/material.dart';
import '../../blocs/welcome_bloc.dart';
import './pages/page.dart';
import './pages/page2.dart';
import './pages/login.dart';

class ViewerWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: welcomeBloc.combinedStream,
        builder: (context, AsyncSnapshot snapshot) {
          return PageView(
            children: <Widget>[
              Page1(),
              Page2(),
              Login(),
            ],
            onPageChanged: (page) {
              welcomeBloc.updatePage(page);
              print(snapshot.data._page);
              // welcomeBloc.updatePage(page + 1);
            },
            // controller: snapshot.data.getController,
          );
        });
  }
}

Answer 1

不要以为事情是这样的。尽管如果您想这样做，请尝试将您的流构建器作为另一个流构建器的子级。但我不会推荐这种方式。

您不会收听来自同一个集团的多个流，一个好方法是每个集团架构有一个流。

您可以阅读更多有关提供程序的信息，它们比 bloc 更简单，并且是 flutter 社区推荐的。

Answer 2

您可以使用 Rx.combineLatest3 赞 this link 合并流，但据我从您的代码中了解到，最好定义一个这样的模型：

Class MyModel{

    PageController pageController;
    int currentPage;
    bool isLastPage;
...

}

然后有一个与之配合使用的流。

编辑：将模型应用于代码

我用两种方法更改了代码。

第一个

您可以定义一个模型并使用该模型，因此您不需要 3 个不同的流，如果您始终需要组合流版本而不是任何其他地方的每个流，这就可以了。

I wrote code in one file.

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

class MyModel {
  PageController pageController;
  int currentPage;
  bool isLastPage;

  MyModel({this.currentPage, this.pageController, this.isLastPage});
}

class WelcomeBloc {
  var _myModel = PublishSubject<MyModel>();

  Stream<MyModel> get getModel => _myModel.stream;

  // updatePage(int page) {
  //   _page.sink.add(page);
  // }

  // updatePageState(bool state) {
  //   _lastPage.sink.add(state);
  // }
  void updateModel(MyModel model) {
    _myModel.sink.add(model);
  }

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

final welcomeBloc = WelcomeBloc();

class ViewerWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<MyModel>(
        stream: welcomeBloc.getModel,
        builder: (context, AsyncSnapshot<MyModel> snapshot) {
          if (snapshot.hasData) {
            MyModel model = snapshot.data;
            return PageView(
              children: <Widget>[
                Page1(),
                Page2(),
                Login(),
              ],
              onPageChanged: (page) {
                model.currentPage = page;
                welcomeBloc.updateModel(model);
                print(model.currentPage);
                // welcomeBloc.updatePage(page + 1);
              },
              controller: model.pageController,
            );
          }
          return Center(child: CircularProgressIndicator());
        });
  }
}

第二个

如果你在其他地方也需要其他流等等，你可以组合流，你可以以任何你想要的方式组合它们，列表，映射或定义的模型，我使用了一个模型（MyModel）。

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

class MyModel {
  PageController pageController;
  int currentPage;
  bool isLastPage;

  MyModel({this.currentPage, this.pageController, this.isLastPage});
}

class WelcomeBloc {
  final _controller = PublishSubject<PageController>();
  final _page = PublishSubject<int>();
  final _lastPage = PublishSubject<bool>();

  Stream<MyModel> get combinedStream =>
      Rx.combineLatest3(_page, _lastPage, _controller,
          (int page, bool isLast, PageController controller) {
        return MyModel(
          currentPage: page,
          isLastPage: isLast,
          pageController: controller,
        );
      });

  Stream<PageController> get getController => _controller.stream;
  Stream<int> get currentPage => _page.stream;
  Stream<bool> get isLastPage => _lastPage.stream;

  updatePage(int page) {
    _page.sink.add(page);
  }

  updatePageState(bool state) {
    _lastPage.sink.add(state);
  }

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

final welcomeBloc = WelcomeBloc();

class ViewerWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<MyModel>(
        stream: welcomeBloc.combinedStream,
        builder: (context, AsyncSnapshot<MyModel> snapshot) {
          if (snapshot.hasData) {
            MyModel model = snapshot.data;

            return PageView(
              children: <Widget>[
                Page1(),
                Page2(),
                Login(),
              ],
              onPageChanged: (page) {
                welcomeBloc.updatePage(page);
                print(model.currentPage);
                // welcomeBloc.updatePage(page + 1);
              },
              controller: model.pageController,
            );
          }
          return Center(child: CircularProgressIndicator());
        });
  }
}

在 Bloc 中合并流

Merging streams in a Bloc

flutter

flutter-dependencies

rxdart

编辑：将模型应用于代码