Flutter TextField - 如何在 <SHIFT-ENTER> 上支持 <ENTER> _and_ 换行上的提交

标签 flutter flutter-layout flutter-web

我正在开发一个包含聊天功能的 Flutter Web 应用程序。
我想包含一个普通的输入功能,用户可以在其中输入文本并将其发送到聊天流中。如今聊天应用程序的一个标准功能是 send<ENTER>并在 <SHIFT-ENTER> 上执行换行,或此的一些变体。
目前,我一次只能实现其中一个功能。如果您设置了 TextFieldkeyboardTypeTextInputType.multiline然后 <ENTER><SHIFT-ENTER>总是执行换行,似乎没有办法覆盖这种行为。
如果您的 TextFieldTextInputType.text您可以捕获<ENTER>并发送,但试图捕获 <SHIFT-ENTER>添加换行符不起作用。我尝试通过 onKey 手动抓取按键处理程序和插入 \ncontroller.text ,但似乎 TextInputType.text根本不适用于多线,所以它不能很好地发挥作用。
只是想知道是否有其他开发人员遇到过这种情况或提出了任何合适的解决方案。理想情况下,解决方案也适用于 android/ios。对我来说,我决定和 TextInputType.text 一起去暂时放弃多行功能。
谢谢

最佳答案

对于它的值(value),我能够编造一个合理的解决方案,我将在下面发布以防万一有人自己遇到这个问题。
我将 Textfield 包装在一个键盘监听器中,该监听器调用我的 onSend当它看到 <Enter> 时的功能.我以前试过这个,但我想早些时候我错过了 RawKeyEventDataWeb 的类型转换。这让我可以捕获 isShiftPressed允许在 <SHFT-ENTER> 上添加新行不强制发送。不幸的是,我不得不添加一些hacky 代码来删除\n这是在按 Enter 时添加的,但这对于功能 + 现代消息传递来说是一个很小的代价。

RawKeyboardListener(
   focusNode: focusNode,
   onKey: handleKeyPress,
   child: TextField(
        controller: messageController,
        minLines: 1,
        maxLines: null,
        textInputAction: TextInputAction.done,
        style: normalTextStyle,
        keyboardType: TextInputType.multiline,
        decoration: InputDecoration(
             isDense: true,
             hintText: 'Type a message',
             hintStyle: TextStyle(
                  fontSize: 16,
                  color: Color(0xFF474749),
             ),
             border: InputBorder.none,
        ),
    ),
)

void handleKeyPress(event) {
if (event is RawKeyUpEvent && event.data is RawKeyEventDataWeb) {
  var data = event.data as RawKeyEventDataWeb;
  if (data.code == "Enter" && !event.isShiftPressed) {
    final val = messageController.value;
    final messageWithoutNewLine =
        messageController.text.substring(0, val.selection.start - 1) +
            messageController.text.substring(val.selection.start);
    messageController.value = TextEditingValue(
      text: messageWithoutNewLine,
      selection: TextSelection.fromPosition(
        TextPosition(offset: messageWithoutNewLine.length),
      ),
    );
    _onSend();
  }
}
}

关于Flutter TextField - 如何在 <SHIFT-ENTER> 上支持 <ENTER> _and_ 换行上的提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65224279/

相关文章:

用于具有多个 Material 应用程序的 Web 路由的 Flutter

Flutter snapshot.data() 始终为空

dart - Flutter BottomNavigationBar 不能处理三个以上的项目

dart - 我如何创建列表列表

android-studio - 在Mac上使用Flutter设置Android Studio的问题

flutter - 设计带有图像和文本的 Flutter 按钮

flutter - 如何让切换按钮占据容器中的整个空间?

android - 如何用文本填充轮子,然后使其旋转(全部在 Flutter 中)?

flutter - 无法显示图标和文字

javascript - 为 Flutter Web 应用添加 id 或 name 属性或其他标识方式?