flutter - Flutter在TextField小部件上未显示BLoC流值

Question

我正在尝试创建一个屏幕，以便用户可以在一瞬间添加一个人的生日，但是在另一瞬间，同一屏幕应该从Firebase加载数据并在TextFields中显示加载的值。我将BLoC与流一起使用来执行此操作。我可以正确地从Firebase加载数据，并使用每个StreamBuilders中的TextField将其传递到屏幕，但是即使流包含正确的值，也不会显示这些值。在同一页面中，我对可选数据使用了DropdownButtons，它们可以接收并显示该值。我不确定我在做什么错。

这是每个TextField的代码:

class InputField extends StatelessWidget {

  final IconData icon;
  final String hint;
  final bool obscure;
  final TextInputType type;
  final Stream<String> stream;
  final Function(String) onChanged;

  InputField({this.icon, this.hint, this.obscure, this.type, this.stream, this.onChanged});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<String>(
      stream: stream,
      builder: (context, snapshot) {
        return TextField(
          onChanged: onChanged,
          keyboardType: type != null ? type : null,
          decoration: InputDecoration(
            icon: icon == null ? null : Icon(icon, color: Colors.white,),
            hintText: hint,
            hintStyle: TextStyle(color: Colors.white),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Theme.of(context).primaryColor)
            ),
            contentPadding: EdgeInsets.only(
              left: 5,
              right: 30,
              bottom: 30,
              top: 30
            ),
            errorText: snapshot.hasError ? snapshot.error : null
          ),
          style: TextStyle(color: Colors.white),
          obscureText: obscure,
        );
      }
    );
  }
}

这是我初始化输入类型的地方:

                  return Padding(
                    padding: EdgeInsets.all(16.0),
                    child: SingleChildScrollView(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          InputField(
                            icon: Icons.person_outline,
                            hint: "Nome do aniversariante",
                            obscure: false,
                            type: TextInputType.text,
                            stream: _birthdayBloc.outName,
                            onChanged: _birthdayBloc.changeName,
                          ),
                          InputField(
                            icon: Icons.phone,
                            hint: "Telefone",
                            obscure: false,
                            type: TextInputType.text,
                            stream: _birthdayBloc.outPhone,
                            onChanged: _birthdayBloc.changePhone,
                          ),
                          InputField(
                            icon: Icons.email,
                            hint: "E-mail",
                            obscure: false,
                            type: TextInputType.text,
                            stream: _birthdayBloc.outEmail,
                            onChanged: _birthdayBloc.changeEmail,
                          ),
                          DropdownWidget(
                            isCenter: false,
                            icon: Icons.list,
                            arrowIcon: Icons.keyboard_arrow_down,
                            hint: "Selecione uma categoria",
                            items: _birthdayBloc.getCategoryList(),
                            stream: _birthdayBloc.outCategory,
                            onChanged: _birthdayBloc.changeCategory,
                          ),
                          DropdownWidget(
                            isCenter: false,
                            icon: Icons.notifications,
                            arrowIcon: Icons.keyboard_arrow_down,
                            hint: "Selecione a notificação",
                            items: _birthdayBloc.getNotificationList(),
                            stream: _birthdayBloc.outNotification,
                            onChanged: _birthdayBloc.changeNotification,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Expanded(
                                flex: 5,
                                child: DropdownWidget(
                                  isCenter: false,
                                  label: "Mês",
                                  icon: Icons.calendar_today,
                                  arrowIcon: Icons.keyboard_arrow_down,
                                  hint: "Selecione o mês",
                                  items: _birthdayBloc.getMonthsList(),
                                  stream: _birthdayBloc.outMonth,
                                  onChanged: _birthdayBloc.changeMonth,
                                ),
                              ),
                              Expanded(
                                flex: 5,
                                child: DropdownWidget(
                                  isCenter: false,
                                  label: "Dia",
                                  arrowIcon: Icons.keyboard_arrow_down,
                                  hint: "Selecione o dia",
                                  items: _birthdayBloc.getDaysList(),
                                  stream: _birthdayBloc.outDay,
                                  onChanged: _birthdayBloc.changeDay,
                                ),
                              ),
                            ],
                          ),
                          DropdownWidget(
                              isCenter: false,
                              label: "Ano de nascimento",
                              icon: Icons.perm_contact_calendar,
                              arrowIcon: Icons.keyboard_arrow_down,
                              hint: "Selecione o ano",
                              items: _birthdayBloc.getYearsList(),
                              stream: _birthdayBloc.outYear,
                              onChanged: _birthdayBloc.changeYear,
                              valueController: 'Não sei'
                          ),

这是加载屏幕时从 Firebase检索数据的代码:

  Future<void> _loadSelectedBirthday(personId) async {
    String _userUid = await _getCurrentUserUid();

    await _firestore.collection('birthdays').document(_userUid).collection('birthdays').document(personId).get()
      .then((document) {
        _nameController.add(document.data["name"]);
        _phoneController.add(document.data["phone"]);
        _emailController.add(document.data["email"]);
        _categoryController.add(document.data["category"]);
        _notificationController.add(document.data["notification"]);
        _monthController.add(document.data["month"]);
        _dayController.add(document.data["day"]);
        _yearController.add(document.data["year"]);

        print(_nameController.value);
        print(_phoneController.value);
        print(_emailController.value);
        print(_categoryController.value);
        print(_notificationController.value);
        print(_monthController.value);
        print(_dayController.value);
        print(_yearController.value);

        _stateController.add(BirthdayState.READY);
      }).catchError((error) {
        print('ERROR => $error');
      });
  }

我从上面的打印品得到的输出是:

I/flutter (10907): Person Name
I/flutter (10907): 62999991234
I/flutter (10907): someemail@gmail.com
I/flutter (10907): Familiar
I/flutter (10907): No dia
I/flutter (10907): 3
I/flutter (10907): 25
I/flutter (10907): 1996

这是来自应用程序屏幕的打印:

Answer 1

看起来您错过了使用值初始化TextField的原因，这就是为什么field缺少数据的原因。 TextField可以通过其 Controller 属性进行初始化:

...
          return TextField(
            controller: TextEditingController(text: snapshot.data), // <--
            keyboardType: type != null ? type : null,
            onChanged: onChanged,
...

因此，这可能不是在StreamBuilder中以这种方式初始化文本字段的最佳方法。根据您的要求，可能会更好:

使InputField小部件成为有状态的

在InputField的State类

中声明TextEditingController字段

在状态中订阅流，并在每次流发射数据时更新 Controller 的值或文本属性。