这可能听起来容易,但我们如何能做一个多行可编辑的文本域颤振?TextField只与单行工作。

编辑:一些精确度,因为看起来不清楚。 虽然您可以将multiline设置为虚拟换行文本内容,但它仍然不是多行。它是一行显示成多行。 如果你想做这样的事,那就不行。因为你没有回车键。没有回车键就没有多路线路。


当前回答

指定TextInputAction。newline使TextField响应enter键并接受多行输入:

textInputAction: TextInputAction.newline,

其他回答

1. 固定高度:

(A)基于线条:

TextField(
  minLines: 3, // Set this
  maxLines: 6, // and this
  keyboardType: TextInputType.multiline,
)

(B)根据高度:

SizedBox(
  height: 200, //     <-- TextField expands to this height. 
  child: TextField(
    maxLines: null, // Set this 
    expands: true, // and this
    keyboardType: TextInputType.multiline,
  ),
)

2. 灵活的高度:

使用列和包装TextField在扩展:

Column(
  children: [
    Expanded(
      child: TextField(
        maxLines: null, // Set this 
        expands: true, // and this
        keyboardType: TextInputType.multiline,
      ),
    ),
  ],
)

(可选)布景装饰:

你可以看到这个装饰的任何上述TextField:

decoration: InputDecoration(
  hintText: 'Write a message',
  filled: true,
)

对于自动抓取,只使用空maxLines

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

or

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

这段代码为我工作,我也能够使用ENTER的网页和移动。

@override
  Widget build(BuildContext context) {
      double width = MediaQuery.of(context).size.width;
      double height = MediaQuery.of(context).size.height;
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start, 
      children: [
      Container(
        child: ConstrainedBox(
          //  fit: FlexFit.loose,
          constraints:  BoxConstraints(
            maxHeight: height,//when it reach the max it will use scroll
            maxWidth: width,
          ),
          child: const TextField(
            keyboardType: TextInputType.multiline,
            maxLines: null,
            minLines: 1,
            decoration: InputDecoration(
              fillColor: Colors.blueAccent,
              filled: true,
              hintText: "Type  ",
              border: InputBorder.none,
            ),
          ),
        ),
      )
    ]);
  }

如果你想要你的TextField是适应用户输入,然后这样做:

TextField(
    keyboardType: TextInputType.multiline,
    minLines: 1,//Normal textInputField will be displayed
    maxLines: 5,// when user presses enter it will adapt to it
    );

在这里,你可以将Max行设置为任何你想要的,你就可以开始了。 在我看来,将maxlines设置为null不是一个好的选择,这就是为什么我们应该将它设置为一些值。

使用扩展小部件进行动态感觉

Expanded(
            child: TextField(
              keyboardType: TextInputType.multiline,
              minLines: 1,
              maxLines: 3,
            ),
          )