这可能听起来容易,但我们如何能做一个多行可编辑的文本域颤振?TextField只与单行工作。
编辑:一些精确度,因为看起来不清楚。 虽然您可以将multiline设置为虚拟换行文本内容,但它仍然不是多行。它是一行显示成多行。 如果你想做这样的事,那就不行。因为你没有回车键。没有回车键就没有多路线路。
这可能听起来容易,但我们如何能做一个多行可编辑的文本域颤振?TextField只与单行工作。
编辑:一些精确度,因为看起来不清楚。 虽然您可以将multiline设置为虚拟换行文本内容,但它仍然不是多行。它是一行显示成多行。 如果你想做这样的事,那就不行。因为你没有回车键。没有回车键就没有多路线路。
当前回答
虽然这个问题是相当老的,没有广泛的答案,解释如何动态调整TextField与很少的开发人员的努力。这是特别重要的,当TextField是放在一个flexbox,如ListView, SingleChildScrollView等(flexbox将无法确定一个可扩展的TextField的内在大小)。
正如许多其他用户所建议的那样,像这样构建你的TextField:
TextField(
textInputAction: TextInputAction.newline,
keyboardType: TextInputType.multiline,
minLines: null,
maxLines: null, // If this is null, there is no limit to the number of lines, and the text container will start with enough vertical space for one line and automatically grow to accommodate additional lines as they are entered.
expands: true, // If set to true and wrapped in a parent widget like [Expanded] or [SizedBox], the input will expand to fill the parent.
)
如何应对TextField的内在高度缺失?
将TextField包装在一个intrinsic height类中,以提供动态计算的可扩展TextField的内在高度给它的父类(当通过例如flexbox请求时)。
其他回答
你必须在TextField小部件中使用这一行:
maxLines: null,
如果没有工作,请注意,你必须删除这个:
textInputAction: TextInputAction.next
它是禁用多行属性动作在键盘..
如果你想要你的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不是一个好的选择,这就是为什么我们应该将它设置为一些值。
指定TextInputAction。newline使TextField响应enter键并接受多行输入:
textInputAction: TextInputAction.newline,
使用扩展小部件进行动态感觉
Expanded(
child: TextField(
keyboardType: TextInputType.multiline,
minLines: 1,
maxLines: 3,
),
)
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,
)