使用 Bloc、RxDart 和 Flutter 创建用户个人资料页面

Question

我的目标是使用 bloc 模式在 Flutter 中创建一个编辑个人资料页面。

我已经搜索了 better/cleaner 使用 Bloc 在 Flutter 中创建用户个人资料页面的方法，但我找不到任何东西。

现在我必须列出每个字段。这是 2 个字段的示例：

final _firstNameController = BehaviorSubject<String>();
final _lastNameController = BehaviorSubject<String>();

Function(String) get firstNameChanged => _firstNameController.sink.add;
Function(String) get lastNameChanged => _lastNameController.sink.add;

Stream<String> get firstNameStream => _firstNameController.stream;
Stream<String> get lastNameStream => _lastNameController.stream;

String get firstName => _firstNameController.value;
String get lastName => _lastNameController.value;


@override
  void dispose() {
_firstNameController?.close();
_lastNameController?.close();
}

还有很多字段，如果可以避免，我不想拥有所有这些代码。

我希望只有 1 个用户组并更新该用户的特定字段。我已将以下内容添加到用户组。

final _userFetcher = BehaviorSubject<User>();

Observable<User> get userStream => _userFetcher.stream;
User get user => _userFetcher.value;
Function(User) get changeUser => _userFetcher.sink.add;

@override
  void dispose() async {
    await _userFetcher.drain();
    _userFetcher.close();
  }

这是我的用户模型示例：

class User {

  final Name name;

  User.fromJson(Map<String, dynamic> json)
      : name = Name.fromJson(json);

  Map<String, dynamic> toJson() => {
    "first": name.first,
    "last": name.last,
  };
}

问题是我不知道如何使用文本字段编辑我的 "User" 模型中的 "fist name" 和 "last name" 字段。

这可能吗？我是不是用错了方法，还是应该坚持单独列出每个字段？

Answer 1

为每个单独的字段单独管理所有这些流可能很麻烦。我建议您试试这个库 flutter bloc 。这是一个非常好的状态管理工具。您只需定义状态和事件，然后为每个事件生成一个状态。

例如，您希望在用户输入时验证密码字段。您定义一个事件（例如 PasswordChanged）。这将调用 bloc 中的方法。您可以在其中编写业务逻辑来检查验证。

在你的验证逻辑之后你可以产生一个新的状态（错误，成功）。这将导致您的 UI 被重建，然后您可以根据您的状态更新您的 UI。

你应该查看这个库的文档。它也有一些很好的例子。

Answer 2

谢谢大家的帮助！

我最终能够通过在我的 textField 中实现以下内容来编辑上面列出的用户模型中嵌套的名字和姓氏字段：

onChanged:(text) {
        User thisUser = _bloc.user;
        thisUser.name.last = text;
      }

使用 Bloc、RxDart 和 Flutter 创建用户个人资料页面

Create user profile page using Bloc, RxDart and Flutter

firebase

flutter

rxdart

bloc