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