多行文本字段在扑动

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

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

200563 次浏览

TextField具有maxLines属性。

enter image description here

要使用自动换行,只需将maxLines设置为null:

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

如果maxLines属性为null,则没有行数限制,并且启用换行。

使用这个

TextFormField(
keyboardType: TextInputType.multiline,
maxLines: //Number_of_lines(int),)
< p > 官方文件说明: maxLines属性可以设置为null以消除对行数的限制。默认情况下,它是1,这意味着这是一个单行文本字段。< / p >

注意: maxLines不能为零。

如果上面没有为你工作,然后尝试添加minLines

TextField(
keyboardType: TextInputType.multiline,
minLines: 3,
maxLines: null);

虽然其他人已经提到键盘类型“TextInputType”。multiline”可以使用,我想添加一个TextField的实现,当输入新行时自动调整其高度,因为它通常希望模仿WhatsApp和类似应用程序的输入行为。

每次更改文本时,我都会分析输入中的'\n'字符的数量。这似乎有点过分,但不幸的是,到目前为止,我在Flutter中没有找到更好的实现这种行为的可能性,即使在旧的智能手机上,我也没有注意到任何性能问题。

class _MyScreenState extends State<MyScreen> {
double _inputHeight = 50;
final TextEditingController _textEditingController = TextEditingController();


@override
void initState() {
super.initState();
_textEditingController.addListener(_checkInputHeight);
}


@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}


void _checkInputHeight() async {
int count = _textEditingController.text.split('\n').length;


if (count == 0 && _inputHeight == 50.0) {
return;
}
if (count <= 5) {  // use a maximum height of 6 rows
// height values can be adapted based on the font size
var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
setState(() {
_inputHeight = newHeight;
});
}
}




// ... build method here
TextField(
controller: _textEditingController,
textInputAction: TextInputAction.newline,
keyboardType: TextInputType.multiline,
maxLines: null,
)

如果你想要你的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使文本框响应回车键并接受多行输入:

textInputAction: TextInputAction.newline,

使用expands,你不需要给minLinesmaxLines任何特定的值:

TextField(
maxLines: null,
expands: true,
keyboardType: TextInputType.multiline,
)
   TextFormField(
minLines: 2,
maxLines: 5,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
hintText: 'description',
hintStyle: TextStyle(
color: Colors.grey
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
),
),

虽然这个问题相当老了,但没有广泛的答案来解释如何动态地调整TextField的大小,而开发人员很少付出努力。当TextField被放置在诸如ListView、SingleChildScrollView等flexbox中时,这尤其重要(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包装在IntrinsicHeight中,以向其父对象提供可扩展TextField的动态计算的固有高度(当通过例如flexbox请求时)。

使用Expanded小部件进行动态感觉

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

这段代码为我工作,我也能够使用ENTER为web &移动。

@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,
),
),
),
)
]);
}

enter image description here

你必须在TextField小部件中使用这一行:

maxLines: null,

如果没有工作,请注意,你必须删除这个:

textInputAction: TextInputAction.next

它是禁用多行属性动作在键盘..

对于自动抓取,只需对maxLines使用null

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

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

使用这个

 Expanded(
child: TextField(
controller: textMessageController,
keyboardType: TextInputType.multiline,
textCapitalization: TextCapitalization.sentences,
minLines: 1,
maxLines: 3,
onChanged: ((value) {
setState(() {
_messageEntrer = value;
});
}),
decoration: InputDecoration(
hintText: "Type your message here",
hintMaxLines: 1,
contentPadding:
const EdgeInsets.symmetric(horizontal: 8.0, vertical: 10),
hintStyle: TextStyle(
fontSize: 16,
),
fillColor: Colors.white,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Colors.white,
width: 0.2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Colors.black26,
width: 0.2,
),
),
),
),
),