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

【问题标题】：Create user profile page using Bloc, RxDart and Flutter使用 Bloc、RxDart 和 Flutter 创建用户个人资料页面
【发布时间】：2019-10-05 08:07:20
【问题描述】：

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

我已经搜索了一种更好/更简洁的方法来使用 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,
  };
}

问题是我不知道如何使用文本字段来编辑“用户”模型中的“拳头名称”和“姓氏”字段。

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

【问题讨论】：

我在“editProfile 页面”上使用了一个流构建器来监听： Widget buildProfile() { _loadUser(); return StreamBuilder(流: _bloc.userStream, builder: (context, snapshot) { if (snapshot.hasError) return _buildErrorWidget(snapshot.error); if (snapshot.hasData) { return _buildUserWidget(snapshot.data); }否则 { 返回 _buildLoadingWidget(); } }, ); }

标签： firebase flutter bloc rxdart

【解决方案1】：

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

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

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

您应该查看此库的文档。它也有一些很好的例子。

【讨论】：

谢谢尼克。我正在使用 bloc，但我不知道如何更改嵌套字段的值。我可以通过创建一个新的用户变量并编辑它的字段来改变它。然后它返回到我的用户块中的 _userFetcher。

【解决方案2】：

感谢大家的帮助！

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

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

【讨论】：