Flutter 文本字段随着用户输入而扩展

Question

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

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

Answer 1

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

它被记录在案（但不完全清楚）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

设置为 null 与设置为 1 的效果相同（它仅水平增长一行）。

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

Answer 3

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

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

代码示例：文本字段（最小行数：1，最大行数：8）

Answer 4

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

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

Answer 5

@Rabi Roshan,

As shown in the first answer, setting maxLines to null will do the trick. However this would allow the textfield to grow infinitely.

To have more control, set minLines to 1 and maxLines as needed. Hope this helps!

非常感谢！

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

Answer 6

textfield and need to have multi-line as below so that the text wraps, however it takes up the space of all the lines that is defined in maxLines. I want to be able to have it look like 1 line and expand as the text wraps

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

你可以简单地使用这个；

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,
  ));

Flutter 文本字段随着用户输入而扩展

Flutter textfield expand as user types

flutter