在 StreamBuilder 中具有初始值的 TextField

Posted 2023-02-23

【中文标题】在 StreamBuilder 中具有初始值的 TextField

【英文标题】：TextField with initial value inside StreamBuilder

【发布时间】：2019-05-10 00:11:21

【问题描述】：

我们正在创建一个用户的编辑数据页面，所以文本字段已经填充了用户数据，用户可以更改并保存它...问题是当我开始在文本字段中输入字符时，光标会丢失，我输入的每个字符（从设备键盘），光标转到第一个字符......如果我用我的初始值删除控制器，它工作正常，但是我不能让我的文本字段填充用户数据.

代码示例：

child: StreamBuilder<String>(
    stream: _bloc.myStream,
    builder: (context, snap) => TextField(
          decoration: InputDecoration(
            hintText: 'example',
            labelText: 'Name',
            errorText: snap.error,
          ),
          onChanged: _bloc.updateMyStream,
          controller: TextEditingController(text: snap.data),
        ),
  ),

【问题讨论】：

您陷入了循环-您在 TextField 中输入数据-它调用-onChanged: _bloc.updateMyStream-更新流-再次更新数据stream: _bloc.myStream 获取新数据然后转到controller: TextEditingController(text: snap.data)再次更新文本字段。因此您的光标会再次转到第一个字符。

我也试过：child: StreamBuilder( stream: _bloc.myInitialValueStream, builder: (context, snap) => TextField( decoration: InputDecoration( errorText: snap.error, ), onChanged: _bloc.updateAnotherStream, controller: TextEditingController(text: snap.data), ), )，然后只有当我第一次关注文本字段时，光标才会转到第一个字符......

而不是直接返回 TextField - 使用条件 if (snap.hasDate)return TextField... 因为流初始数据始终为 Null。检查 - docs.flutter.io/flutter/widgets/StreamBuilder-class.html

anmol.majhail，做到了，但没有任何改变......光标仍然移动到第一个字符...... =/

如果你评论onChanged: _bloc.updateMyStream,会怎样

【参考方案1】：

每当您需要更新 TextController 文本时，为了能够对其进行编辑，您需要像这样固定光标位置

textController.value = textController.value.copyWith(text:<NEW_VALUE>,);

将 NEW_VALUE 替换为新文本。

【讨论】：

@ViniciusSossella 你对这个例子的最终解决方案是什么？我没明白。

你能举一个更详细的例子吗？我有类似的情况，无法弄清楚。

当我输入时它会将光标位置放在开头

光标位置会移到单词的中间，或者有时紧跟在第一个字母之后，但绝不会像应该的那样在末尾​​span>

【参考方案2】：

@XoXo 这里是完整的代码，但是你可以按照自己的方式来做。

TextEditingController _controller = TextEditingController();

return StreamBuilder<String>(
    stream: _bloc.myStream,
    builder: (context, snap) 
      _controller.value =
          _controller.value.copyWith(text: snap.data);

      return TextField(
        decoration: InputDecoration(
          hintText: 'ex: Centro',
          labelText: 'Bairro',
          errorText: snap.error,
        ),
        onChanged: _bloc.updateMyStream,
        controller: _controller,
      );
    );

【参考方案3】：

要将光标移到文本的末尾，当您编辑文本控制器时，请考虑像这样编辑您的选择控制器：

controller.text = newText;
controller.selection = controller.selection.copyWith(baseOffset: newText.length, extentOffset: newText.length);

希望对您有所帮助！

【讨论】：

像魅力一样工作。非常感谢。