Flutter

Question

各位！当我正常使用键盘输入时，当内容宽度超过TextField的宽度时，内容会自动滚动到末尾；但是当我使用TextEditingController为TextField设置内容时，当内容超过TextField的宽度时，内容不会自动滚动到末尾。

代码如下

class _TextFieldPageState extends State<TextFieldPage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField content not scroll'),
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(
              width: 100,
              child: TextField(
                controller: _controller,
                maxLines: 1,
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  // insert 'Flutter'
                  _controller.text += 'Flutter';
                  // change cursor position to end
                  _controller.selection = TextSelection(
                    baseOffset: _controller.text.length,
                    extentOffset: _controller.text.length,
                  );
                },
                child: Text('insert text'))
          ],
        ),
      ),
    );
  }
}

键盘输入：

TextEditingController 设置文本：

Controller插入文本时，如何让TextField的内容自动滚动到末尾？谢谢！！！

Answer 1

像这样添加FocusNode：

FocusNode myFocusNode = FocusNode();

return Scaffold(
    body: Center(
  child: Column(
    children: [
      SizedBox(
        width: 100,
        child: TextField(
          focusNode: myFocusNode,
          controller: _controller,
          maxLines: 1,
        ),
      ),
      ElevatedButton(
          onPressed: () {
            // insert 'Flutter'
            _controller.text += 'Flutter';
            myFocusNode.requestFocus();
            // change cursor position to end
            _controller.selection = TextSelection(
              baseOffset: _controller.text.length,
              extentOffset: _controller.text.length,
            );
          },
          child: Text('insert text'))
    ],
  ),
));

结果如下所示：

Answer 2

这种方式对我有用。将 onPressed 的功能更改为：

ElevatedButton(
              onPressed: () async {
                // insert 'Flutter'

                _editingController.text += 'Flutter1';
                await Future.delayed(Duration(milliseconds: 10));
                _scrollController
                    .jumpTo(_scrollController.position.maxScrollExtent);
                print("Jumpted");
                _focusNode.unfocus();
                await Future.delayed(Duration(milliseconds: 10));
                _focusNode.requestFocus();
              },
              child: Text('insert text'),
            )

文本字段为：

TextField(
                controller: _editingController,
                focusNode: _focusNode,
                scrollController: _scrollController,
                maxLines: 1,
              )

要知道的主要事情是 TextField 有另一个名为 ScrollController link 的控制器，可用于获得您想要的结果。

Ps: 不要忘记声明滚动和焦点变量

 final TextEditingController _editingController = TextEditingController();
  final ScrollController _scrollController = ScrollController();
  final FocusNode _focusNode = FocusNode();

Flutter - TextField 内容在插入文本时不会自动滚动

Flutter - TextField content does not scroll automatically when inserting text

dart

flutter-layout

flutter-dependencies