Flutter 文本字段随用户类型扩展

Posted 2023-02-23

【中文标题】Flutter 文本字段随用户类型扩展

【英文标题】：Flutter textfield expand as user types

【发布时间】：2018-08-13 03:20:52

【问题描述】：

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

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

【问题讨论】：

一个可增长的TextField 目前在 Flutter 中不可用。

这是@HemanthRaj，只是没有很好的记录。您可能还应该能够使用某种 Flexible 或 Expanded 使其水平增长，尽管我不确定这是否是一个好主意

这个问题似乎更有可能与垂直增长有关。我已经深入研究了代码，没有自动垂直增长的选项。

【参考方案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,
),

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

【讨论】：

我认为将maxLines 设置为null 将使其水平而不是垂直增长。希望至少有一个解决方法才能垂直增长

^ 恰恰相反。它会垂直增长，而不是水平增长。

是的。水平宽度将由容器的约束决定——这更容易控制，但可能更难自动增长。但我不太确定水平自动增长是否是一个好主意，即使在平板电脑中（？）

Vertically 是我一直在寻找的，它的工作原理和预期的一样。谢谢

@AnandSuthar - 自此答案以来，情况发生了一些变化。您现在可以在更多配置中设置 minLines 和 maxLines，但我不知道这是否使其稳定。你可以尝试开发（或者可能是测试版）。

【参考方案2】：

使用它应该可以解决问题：

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

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

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

【讨论】：

感谢 minLines 技巧。否则，当您开始删除时，文本字段不会恢复到原来的大小！

【参考方案3】：

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

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

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

【参考方案4】：

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

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

【参考方案5】：

@Rabi Roshan，

如第一个答案所示，将 maxLines 设置为 null 将执行 诡计。但是，这将允许文本字段无限增长。

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

非常感谢！

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

【参考方案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),
          );

【参考方案7】：

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

IntrinsicWidth(
  child: TextField(...
),

在我的例子中，我希望它在屏幕上居中（水平），所以我做到了：

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

【参考方案8】：

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

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