颤动-插入文本时，文本字段内容不会自动滚动 [英] Flutter - TextField content does not scroll automatically when inserting text

问题描述

各位！当我正常使用键盘输入时，当内容宽度超过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设置文本：

如何在使用控制器插入文本时使Textfield的内容自动滚动到末尾？谢谢！

推荐答案

这种方式对我很管用。将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有另一个名为ScrollControllerlink的控制器，可用于实现您所寻求的结果。

ps：不要忘记声明Scroll和Focus变量

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

这篇关于颤动-插入文本时，文本字段内容不会自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！