带有 StreamBuilder 的 TextField 的初始值答案

【问题标题】：Initial value on TextField with StreamBuilder带有 StreamBuilder 的 TextField 的初始值
【发布时间】：2019-09-02 11:35:54
【问题描述】：

我有一个在StreamBuilder 的帮助下呈现的TextField，遵循BLoC 带有接收器和流的模式。

Widget field(SignUpBloc signUpBloc) {
    return StreamBuilder(
      stream: signUpBloc.outFirstName,
      builder: (context, snapshot) {
        return TextField(
          style: TextStyle(fontSize: 15.0),
          onChanged: signUpBloc.inFirstName,
          decoration: InputDecoration(
            errorStyle: TextStyle(fontSize: 15.0),
            errorText: snapshot.error
          ),
        );
      },
    );
}

我的问题是如何设置初始值？我已尝试使用StreamBuilder 的initialData 属性，但TextField 中没有出现任何文字。

【问题讨论】：

标签： flutter bloc

【解决方案1】：

TextEditingController _controller = TextEditingController(); // make a controller, 

Widget field(SignUpBloc signUpBloc) {
  return StreamBuilder(
    stream: signUpBloc.outFirstName,
    initialData: YourData, // provide initial data
    builder: (context, snapshot) {
      _controller.value = TextEditingValue(text: "${snapshot.data}"); // assign value to controller this way
      return TextField(
        controller: _controller,
        style: TextStyle(fontSize: 15.0),
        onChanged: signUpBloc.inFirstName,
        decoration: InputDecoration(
            errorStyle: TextStyle(fontSize: 15.0),
            errorText: snapshot.error
        ),
      );
    },
  );
}

编辑：要将光标放在行尾，可以使用

var cursorPos = _controller.selection;
if (cursorPos.start > _controller.text.length) {
  cursorPos = TextSelection.fromPosition(TextPosition(offset: _controller.text.length));
}
_controller.selection = cursorPos;

Source

【讨论】：

我尝试过使用 TextEditingController，正如您在回答中所展示的那样，但它有一些副作用。例如，在您键入一个字符后，光标总是会移到最左边的位置。一旦输入，它不会显示所有字符，如果我删除所有字符，它也会显示 null。如果您可以在本地环境中尝试，或者我可以用 gif 更新我的问题，这很难用语言来解释。
似乎有很多代码只是为流添加初始值。我还没有尝试过您更新的解决方案，但我相信它会起作用。
是的，它会起作用并同意这是很多代码，可能团队将致力于添加更少的代码行解决方案。谢谢

【解决方案2】：

当您需要传递初始值时，您必须有一个 TextEditingController。使用 value.copyWith 策略不需要处理光标，并且为了使小部件更干净，您可以将文本控制器作为参数传递。

// Stream widget
Widget field(SignUpBloc signUpBloc, TextEditingController _txtController) {
    return StreamBuilder(
    stream: signUpBloc.outFirstName,
    builder: (context, snapshot) {
      _txtController.value =
          _txtController.value.copyWith(text: snapshot.data);
      return TextField(
          controller: _txtController,
          onChanged: signUpBloc.inFirstName;
          decoration: InputDecoration(
            errorStyle: TextStyle(fontSize: 15.0),
            errorText: snapshot.error
          ),
    });
}

【讨论】：