首先问题是这样的,通常的IM聊天的详情页会设置键盘的右下角问题显示为发送按钮,点击后直接发送文本,我们查阅Textfield相关的参数显示TextInputAction可修改文本的显示,使用过程中发现问题,我这边使用的华为手机,其他暂未验证
1、单独设置TextInputAction后,发现没有效果,文字没有变化
2、keyboardType设置该参数后,可生效,但是也有一定的问题, keyboardType和TextInputAction参数不同的配合显示的文本不同
3、设置为发送后点击回调的问题,onSubmitted和onEditingComplete
针对以上问题的解答
1、设置TextInputAction需要keyboardType配合使用,否则无效,
2、keyboardType为TextInputType.text, TextInputAction为TextInputAction.send可显示为发送
3、点击后使用onSubmitted实现回调的话,会有一个问题,就是点击之后会自动的输入框失去焦点,这个测试了很久才发现这个问题,对于IM聊天页面来说显然是不友好的.
使用onEditingComplete作为点击回调,没有这个问题,但是获取输入内容需要使用TextEditingController获取
有其他问题或是更好的处理方式,欢迎不吝赐教
以下是完整的代码
TextField(
keyboardType: TextInputType.text,
focusNode: node,
maxLines: 5,
minLines: 1,
controller: controller,
cursorColor: ColorHelp.color216,
style: TextStyle(color: ColorHelp.color51, fontSize: 14),
decoration: InputDecoration(
isCollapsed: true,
contentPadding: EdgeInsets.zero,
hintText: ' $placehodeStr',
hintStyle: TextStyle(
color: ColorHelp.color153,
fontSize: 14,
fontWeight: FontWeight.w400),
border: OutlineInputBorder(borderSide: BorderSide.none),
),
inputFormatters: [
LengthLimitingTextInputFormatter(maxCount),
FilteringTextInputFormatter.deny(RegExp(r'\n')),
],
onChanged: (text) {
if (text == rxText && text.characters.length >= maxCount) {
print('${text.characters.length}');
processTextToast('消息不能超过$maxCount个字');
return;
}
print('输入= $text ');
if (textChanged != null) {
textChanged(text);
}
},
onEditingComplete: () {
if (replaceTab(controller.text).length == 0) {
processTextToast('消息不能为空');
return;
}
if (sendClickCallBack != null) {
sendClickCallBack();
}
},
// onSubmitted: (value) {
// if (replaceTab(value).length == 0) {
// processTextToast('消息不能为空');
// return;
// }
// if (sendClickCallBack != null) {
// sendClickCallBack();
// }
// },
onTap: () {
print('开始编辑');
startEdit?.call();
},
autofocus: true,
textInputAction: TextInputAction.send,
)