Question

当我在landScape模式下点击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

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

SimpleDateFormat format = new SimpleDateFormat("HH mm ss");

Date   date       = format.parse ( "24 05 10" );

Answer 2

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

示例：

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

                              ),

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

Answer 3

要实现文本区域的精确外观，您可以使用此

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

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

享受....

Answer 4

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

@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 5

设置 expands: true

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

OR

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

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

Answer 6

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

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

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

6 个答案: