Flutter Web多行TextField：回车失焦与Shift+Enter换行冲突问题

问题核心 #

当前配置下，onEditingComplete会在**所有回车操作（含Shift+Enter）**时触发失焦，导致无法实现Shift+Enter换行；移除该逻辑后，又无法通过回车触发输入框失焦，形成交互矛盾。

可行解决方案 #

通过监听键盘事件区分普通回车和Shift+Enter的操作，精准控制焦点与换行行为，以下是两种实现方式：

方案一：键盘事件监听（精准控制） #

通过RawKeyboardListener直接捕获键盘按键状态，区分操作类型：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MultiLineInput extends StatefulWidget {
  const MultiLineInput({super.key});

  @override
  State<MultiLineInput> createState() => _MultiLineInputState();
}

class _MultiLineInputState extends State<MultiLineInput> {
  final TextEditingController tagsController = TextEditingController();
  late FocusNode _inputFocusNode;

  @override
  void initState() {
    super.initState();
    _inputFocusNode = FocusNode();
  }

  @override
  void dispose() {
    tagsController.dispose();
    _inputFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      focusNode: FocusNode(),
      onKey: (RawKeyEvent event) {
        // 仅处理按键抬起事件，避免重复触发
        if (event is RawKeyUpEvent && event.logicalKey == LogicalKeyboardKey.enter) {
          if (!event.isShiftPressed) {
            // 普通回车：触发失焦
            _inputFocusNode.unfocus();
          }
          // Shift+Enter：不干预，保留原生换行逻辑
        }
      },
      child: TextField(
        focusNode: _inputFocusNode,
        textInputAction: TextInputAction.none, // 关闭默认done动作避免冲突
        keyboardType: TextInputType.multiline,
        controller: tagsController,
        minLines: 1,
        maxLines: 10,
      ),
    );
  }
}

方案二：文本内容判断（简洁实现） #

利用onSubmitted结合文本末尾的换行符判断操作类型，适合不需要极致精准的场景：

TextField(
  focusNode: _inputFocusNode,
  textInputAction: TextInputAction.newline,
  keyboardType: TextInputType.multiline,
  controller: tagsController,
  minLines: 1,
  maxLines: 10,
  onSubmitted: (inputValue) {
    // Shift+Enter会自动在文本末尾添加换行，普通回车则不会
    if (!inputValue.endsWith('\n')) {
      _inputFocusNode.unfocus();
    }
  },
)

关键细节说明 #

• 方案一通过直接监听键盘状态，逻辑更精准，适合对交互要求严格的场景
• 方案二依赖文本内容变化，实现更简洁，但极端场景下可能出现判断偏差
• 两种方案均需配合自定义FocusNode，避免使用全局FocusManager的模糊控制

内容的提问来源于stack exchange，提问作者Lloyd