Flutter技术问题：如何点击表情并插入TextField光标所在位置

解决步骤及代码实现 #

首先需要导入 Flutter 的 services 包，用于操作系统剪贴板：

import 'package:flutter/services.dart';

修改 GestureDetector 的 onTap 回调，同时完成表情复制到剪贴板和插入到 TextField 光标位置的逻辑：

GestureDetector(
  onTap: () {
    const emoji = '🙂';
    // 1. 将表情复制到系统剪贴板
    Clipboard.setData(ClipboardData(text: emoji));

    // 2. 将表情插入到 TextField 光标当前位置
    final currentText = controller.text;
    final selection = controller.selection;
    
    // 若有选中内容则替换选中部分，无选中则在光标位置插入表情
    final newText = currentText.replaceRange(
      selection.start,
      selection.end,
      emoji,
    );
    
    controller.text = newText;
    // 把光标移动到插入表情的后方，保持输入连贯性
    controller.selection = TextSelection.collapsed(
      offset: selection.start + emoji.length,
    );
  },
  child: const Text('🙂'),
)

逻辑说明 #

• 复制表情到剪贴板：通过 Clipboard.setData 方法，将表情文本传入 ClipboardData 即可完成系统剪贴板的复制操作。
• 插入到光标位置：
  1. 获取当前输入框的文本内容和光标选中状态；
  2. 使用 replaceRange 方法，在光标选中的起止区间插入（或替换选中内容）表情；
  3. 更新输入框文本后，将光标重置到表情插入后的位置，保证输入体验流畅。

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