使用axis:.vertical创建多行TextField后onSubmit失效,求解决方案
问题解决方案
一、多行TextField实现双击回车触发提交
多行模式下TextField的onSubmit会被回车触发换行而非提交,要实现双击回车提交,可通过监听输入内容变化判断连续两次回车事件:
- 定义状态变量记录上一次输入是否为回车:
bool _lastCharWasEnter = false; final TextEditingController _textController = TextEditingController();
- 在
TextField中通过onChanged实现逻辑:
TextField( controller: _textController, maxLines: null, axis: Axis.vertical, onChanged: (content) { if (content.isEmpty) { _lastCharWasEnter = false; return; } final lastChar = content[content.length - 1]; // 判断当前和上一次都是回车,触发提交 if (lastChar == '\n' && _lastCharWasEnter) { // 执行提交逻辑 _handleSubmit(content.substring(0, content.length - 2)); // 移除末尾的两个回车,保持输入框内容整洁 _textController.text = content.substring(0, content.length - 2); _textController.selection = TextSelection.fromPosition( TextPosition(offset: _textController.text.length) ); } _lastCharWasEnter = lastChar == '\n'; }, )
也可通过RawKeyboardListener监听物理按键事件,适合需要区分软键盘和物理键盘的场景。
二、单行模式下提交不收起键盘
单行TextField默认触发onSubmitted后会自动收起键盘,要保持键盘展开,可通过FocusNode重新请求焦点实现:
- 提前创建
FocusNode:
final FocusNode _inputFocusNode = FocusNode();
- 在
TextField中配置:
TextField( maxLines: 1, focusNode: _inputFocusNode, textInputAction: TextInputAction.send, // 自定义键盘提交按钮样式 onSubmitted: (content) { // 执行提交逻辑 _handleSubmit(content); // 重新请求焦点,避免键盘收起 FocusScope.of(context).requestFocus(_inputFocusNode); }, )
- 组件销毁时释放
FocusNode:
@override void dispose() { _inputFocusNode.dispose(); super.dispose(); }
内容的提问来源于stack exchange,提问作者user20085023
相关产品推荐
相关产品推荐

