如何在flutter中扩展一个textField看起来像一个文本区域

Question

当我在横向模式下点击 textField 时，我想全屏展开，就像 whatsapp

            TextFormField(
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                  prefixIcon: Padding(
                    padding: EdgeInsets.all(0.0),
                    child: Icon(Icons.person,
                        size: 40.0, color: Colors.white),
                  ),
                  hintText: "Input your opinion",
                  hintStyle: TextStyle(color: Colors.white30),
                  border: OutlineInputBorder(
                      borderRadius:
                      BorderRadius.all(new Radius.circular(25.0))),
                  labelStyle: TextStyle(color: Colors.white)),
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 25.0,
              ),
              controller: host,
              validator: (value) {
                if (value.isEmpty) {
                  return "Empty value";
                }
              },
            )

Answer 1

您需要做的就是在创建TextField时设置maxLines变量。 我在 Card 小部件中添加了文本字段，以便您可以看到总面积。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Material App"),
      ),
      body: Column(
        children: <Widget>[
          Card(
            color: Colors.grey,
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: TextField(
                maxLines: 8,
                decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
              ),
            )
          )
        ],
      )
    );
  }

Answer 2

将maxLines设置为null并将keyboardType 设置为TextInputType.multiline，如下所示：

TextField(
    maxLines: null,
    keyboardType: TextInputType.multiline,
) 

Answer 3

不幸的是，在颤振中您无法设置 TextField 或 TextFormField 的最小高度。 为 TextField 或 TextFormField 提供固定大小的最佳方法是指定 Field 应采用的最大行数，而不会进一步扩展。 注意：这不限制输入文本的数量，它只限制显示的行数。

例子：

                             TextFormField(
                                keyboardType: TextInputType.multiline,
                                maxLines: 8,
                                maxLength: 1000,

                              ),

这会将字段的大小限制为 8 行，但最多可以包含 1000 个字符。 希望这会帮助某人。

Answer 4

要获得文本区域的精确外观，您可以使用它

TextFormField(
   minLines: 6, // any number you need (It works as the rows for the textarea)
   keyboardType: TextInputType.multiline,
   maxLines: null,
)

这是输出（需要一些额外的样式）

享受....

Answer 5

设置expands: true

TextField(
  maxLines: null,
  expands: true, 
  keyboardType: TextInputType.multiline,
)

或者

如果您在Column内使用它，请使用：

Expanded(
  child: TextField(
    maxLines: null,
    expands: true,
  ),
)

Answer 6

如果您的 textField 小部件是 Column 的子小部件并且设置expands: true 。

可以设置textAlignVertical: TextAlignVertical.top使文本在顶部对齐。

Answer 7

将 maxLines 设置为 null 并将 keyboardType 设置为 TextInputType.multiline 将使 TextField 的高度随着您的输入而增长。

带有 '\\n' 的提示文本可能会在开始时扩展 TextField 的高度。

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
  decoration: InputDecoration(
      labelText: '内容',
      hintText: '描述下发生的事情吧！\n\n\n\n\n'),

),

这是输出。

与焦点。

没有重点。

Answer 8

这是文本区域的更好解决方案如果您的 UI 中有多个文本区域，那么您必须在其中指定最大行数。 使用此代码创建一个普通组件，它会根据内容进行扩展

TextField(
    maxLines: null,
    keyboardType: TextInputType.multiline,
) 

Answer 9

TextFormField(
          minLines: 6,
          maxLines: null,
          keyboardType: TextInputType.multiline,
          decoration: InputDecoration(
          alignLabelWithHint: true,
          border: OutlineInputBorder(),
          labelText: 'Enter text',
        ),
      ),