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

n3h0vuf2  于 2023-01-28  发布在  Flutter
关注(0)|答案(9)|浏览(203)

当我在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";
                }
              },
            )
6qfn3psc

6qfn3psc1#

您所需要做的就是在创建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, //or null 
                decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
              ),
            )
          )
        ],
      )
    );
  }

b5buobof

b5buobof2#

maxLines设置为 null,将keyboardType设置为 TextInputType.multiline,如下所示:

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

oprakyz73#

要获得文本区域的精确外观,可以使用以下命令

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

下面是输出(需要一些额外的样式)

好好享受...

t40tm48m

t40tm48m4#

遗憾的是,在flutter中无法设置TextField或TextFormField的最小高度。给TextField或TextFormField一个固定大小的最佳方法是指定Field在不进一步扩展的情况下应该占用的最大行数。注意:这并不限制输入文本的数量,它只限制显示的行数。
示例:

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

                              ),

这将限制该字段的大小为8行,但可以采取多达1000个字符。希望这将有助于一些人。

rt4zxlrg

rt4zxlrg5#

设置**expands: true**

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


如果您在Column中使用它,则用途:

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

niwlg2el6#

将maxLines设置为null并将keyboardType设置为TextInputType。多行将使TextField的高度随着您的输入而增长。
带有"\n"的hintText可能会在开始时扩展TextField的高度。

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

),

下面是输出。
带焦点。

无焦点。

bzzcjhmw

bzzcjhmw7#

如果textField小部件是Column的子小部件,则设置expands: true
可以设置textAlignVertical: TextAlignVertical.top使文本在顶部对齐。

mxg2im7a

mxg2im7a8#

这是一个更好的文本区域解决方案如果你的UI中有多个文本区域,那么你必须在它们中指定最大行。使用这段代码创建一个公共组件,它将根据内容扩展

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

mwngjboj9#

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

相关问题