Flutter 文本字段随着用户类型展开

Question

我有一个文本字段，需要如下多行，以便文本换行，但它占用了 maxLines 中定义的所有行的空间。 我希望能够让它看起来像 1 行并随着文本换行而扩展。 关于如何做到这一点的任何想法是 flutter？

new TextField(
                decoration: const InputDecoration(
                  hintText: 'Reply',
                  labelText: 'Reply:',
                ),
                autofocus: false,
                focusNode: _focusnode,
                maxLines: 1,
                controller: _newreplycontroller,
                keyboardType: TextInputType.text,
              ),

Answer 1

将maxLines设置为 null，它将自动垂直增长。

它记录在案（但不完全清楚） here （编辑：我已经创建了一个 PR 来更新这个，我应该从这个问题开始；）。 为了弄清楚，我最终查看了TextField及其超类的代码，看看如果设置为 null 会出现什么行为。

所以你的代码应该如下：

new TextField( 
  decoration: const InputDecoration(
    hintText: 'Reply',
    labelText: 'Reply:',
  ),
  autofocus: false,
  focusNode: _focusnode,
  maxLines: null,
  controller: _newreplycontroller,
  keyboardType: TextInputType.text,
),

如果你试图让它水平自动增长，你可能不应该 - 至少不是基于文本内容。 但我假设你想让它垂直自动增长。

Answer 2

如第一个答案所示，将 maxLines 设置为 null 即可解决问题。 然而，这将允许文本字段无限增长。

要获得更多控制，请根据需要将 minLines 设置为 1 和 maxLines。 希望这有帮助！

代码示例：TextField(minLines:1,maxLines:8)

Answer 3

设置为 null 与设置为 1 的工作方式相同（它仅水平增长一行）。

我认为你必须设置 minLines 和 maxLines。 我正在使用 minLines: 1 和 maxLines: 2 ，当第一行到达末尾时，它会扩展另一行。 当第二行到达末尾时，它将第二行滚动到第一行并创建第三行。 所以你也必须设置 maxLenght 。

Answer 4

你可以简单地使用它；

TextField get _text => TextField(
  maxLines: null,
  decoration: InputDecoration(
    constraints: BoxConstraints(
        maxHeight: responsiveHeight,
        maxWidth: responsiveWidth),
    contentPadding: EdgeInsets.symmetric(
        horizontal: responsiveHorizontalPadding,
        vertical: responsiveVerticalPadding),
    disabledBorder: InputBorder.none,
    border: InputBorder.none,
    enabledBorder: InputBorder.none,
    isDense: false,
  ));

Answer 5

@拉比罗斯汉，

如第一个答案所示，将 maxLines 设置为 null 即可解决问题。 然而，这将允许文本字段无限增长。

要获得更多控制，请根据需要将 minLines 设置为 1 和 maxLines。 希望这有帮助！

非常感谢！

我也更喜欢这个版本，因为它只会在用户输入多于一行时扩展。 如果它超过 maxLines，它将垂直滚动，这是正常情况下应该发生的以及所有大型聊天应用程序都使用的。

Answer 6

textfield 并且需要如下多行以便文本换行，但是它占用了 maxLines 中定义的所有行的空间。 我希望能够让它看起来像 1 行并随着文本换行而扩展

Container(
            child: new TextField (
              keyboardType: TextInputType.multiline,
              minLines: 1,
              maxLines: 10,
              decoration: new InputDecoration(
                  border: new OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(10.0),
                    ),
                  ),
                  filled: true,
                  hintStyle: new TextStyle(color: Colors.grey[800]),
                  hintText: "Type in your text",
                  fillColor: Colors.white70),
            ),
            padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
          );

Answer 7

使用这个应该可以解决问题：

keyboardType: TextInputType.multiline,
minLines: 1,
maxLines: 20,
maxLength: 1000,

添加 minLines 和 MaxLines 对于获得所需的行为很重要，而 maxLength 是一种享受！

也许为时已晚，但迟到总比不到好！

Answer 8

接受的答案非常适合垂直增长。 如果您希望TextField从小处开始并在用户键入时水平扩展，您可以执行以下操作：

IntrinsicWidth(
  child: TextField(...
),

就我而言，我希望它以屏幕为中心（水平），所以我做了：

Center(
   child: IntrinsicWidth(
      child: TextField()
   )
)

Answer 9

如果要设置预定义的高度，请使用expands: true ：

SizedBox(
  height: 200,
  child: TextField(
    decoration: InputDecoration(hintText: 'Enter a message'),
    maxLines: null,
    expands: true,
  ),
)