我将尝试首先解释BLOC组件应该做的越短越好（并且越琐碎）。
- UI屏幕-显然向用户显示数据
- BLOC（或ViewModel）-决定如何向用户显示数据，是否使文本加粗，是否显示错误，是否转到下一个屏幕。
- 回购-决定向用户显示什么数据（我们是否从db中显示内容，是否从API中获取内容，是否显示红色产品？）
您还可以根据您的应用程序执行其他操作，例如：
- 联网-执行API请求并转换对模型的响应，这只能从回购协议访问，并且该组件唯一要做的就是从回购协议（标头，正文，URL）接收数据，并以形式将数据返回回回购协议模型（您可以查看下面的代码）。
- 数据库-对数据库执行CRUD操作，只能从仓库访问。
- 传感器-从本地传感器读取数据，只能从回购中访问。
现在，我建议也将BLOC模式与Dependency
Injection一起使用，没有它是没有用的。使用DI，您可以模拟所有组件直到UI，并且对所有代码进行单元测试非常容易。
另外，我认为没有必要将RxDart（library）与Streams / Future（相当于RxDart
lib的dat）混合使用。首先，我建议仅使用其中之一，并根据您的代码片段，建议您更好地了解如何整体使用Rx。
因此，下面有一个关于如何使用块模式进行登录的小代码片段（也可以检查代码注释:)）。
import 'package:flutter/material.dart';import 'package:http/http.dart' as http;class TheUIScreen extends StatefulWidget { @override _TheUIScreenState createState() => _TheUIScreenState();}class _TheUIScreenState extends State<TheUIScreen> { //TODO: for repo, block, networking, we used dependecy injection, here we have to create and init all the dependecies; TheAuthBlock _block; @override void initState() { super.initState(); TheAuthAPI api = TheAuthAPI(); TheAuthRepo repo = TheAuthRepo(theAuthAPI: api); // we could also do repo = TheAuthRepo(); _block = TheAuthBlock(repo: repo); // we could also do _block = TheAuthBlock(); } @override Widget build(BuildContext context) { return Container( child: RaisedButton(onPressed: () { _block.loginUser("test", "test").then((actualUser) { Navigator.of(context).push(MaterialPageRoute(builder: (context) { return TestRoute(); // or do whatever action you need, the user is logged in })); }).catchError((error) { //show error, something went wrong at login; }); }), ); }}class TheAuthBlock { final TheAuthRepo repo; TheAuthBlock({this.repo = const TheAuthRepo()}); Future<UserModel> loginUser(String email, String password) { return repo.login(email, password).then((userModel) { //TODO: here we decide HOW to display the user, you might want to transfor the UserModel into a model that's used only for UI. //In any way, here you should do all the processing, the UI only should only display the data, not manipulate it. }); }}class TheAuthRepo { final TheAuthAPI theAuthAPI; const TheAuthRepo( {this.theAuthAPI = const TheAuthAPI()}); // THIS would be the default constructor but it will alow us to test it using unit tests. Future<UserModel> login(String email, String password) { //TODO: here you could also check if the user is already logged in and send the current user as a response if (email.isNotEmpty && password.isNotEmpty) { return theAuthAPI.login(email, password).then((userModel) { //TODO: you can do extra processing here before returning the data to the block; }); } else { return Future.error( "Well you can't login with empty ddata"); // TODO: you can return differetn errors for email or pwd; } }}class TheAuthAPI { final String url; const TheAuthAPI({this.url = "https://my.cool.api/login"}); Future<UserModel> login(String email, String pwd) { // TODO: note you return a future from this method since the login will return only once (like almost all http calls) Map<String, String> headers = Map(); // TODO: set any headers you need here Map<String, String> body = { "email": email, "pwd": pwd }; // TODO: change the body acordingly return http.post("THE URL", headers: headers, body: body).then((response) { //TODO: parse response here and return it return UserModel("test", "test"); // this should be generated from the response not like this }); }}class UserModel { final String email; UserModel(this.email, this.pass); final String pass;}
