Flutter关于修改键盘右下角文字展示无效及点击后的操作问题记录

首先问题是这样的,通常的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,
          )

你可能感兴趣的:(Flutter关于修改键盘右下角文字展示无效及点击后的操作问题记录)