Flutter如何通过按钮触发TextField原生上下文菜单？

要实现点击按钮弹出TextFormField的原生系统上下文菜单，不用自定义菜单内容的话，可以直接利用Flutter提供的TextInput.showContextMenu方法，结合FocusNode和TextEditingController来完成，具体步骤如下：

1. 定义必要的变量 #

在你的State类中声明FocusNode和TextEditingController，用来关联到目标TextFormField：

final FocusNode _textFieldFocus = FocusNode();
final TextEditingController _textController = TextEditingController();

2. 构建UI并实现按钮点击逻辑 #

将变量关联到TextFormField，然后在按钮的onPressed回调中完成焦点处理和菜单触发：

Row(
  children: [
    Expanded(
      child: TextFormField(
        focusNode: _textFieldFocus,
        controller: _textController,
      ),
    ),
    Expanded(
      child: ElevatedButton(
        onPressed: () async {
          // 先确保文本框获取焦点，否则菜单无法弹出
          if (!_textFieldFocus.hasFocus) {
            _textFieldFocus.requestFocus();
            // 短暂延迟保证焦点请求生效
            await Future.delayed(const Duration(milliseconds: 100));
          }

          // 处理文本选择范围：如果已有选中区域则用选中范围，否则默认选中全部文本
          final TextSelection currentSelection = _textController.selection;
          final TextRange menuRange = currentSelection.isValid
              ? TextRange(start: currentSelection.start, end: currentSelection.end)
              : TextRange(start: 0, end: _textController.text.length);

          // 触发原生上下文菜单
          TextInput.showContextMenu(
            context: context,
            textEditingValue: _textController.value,
            selection: menuRange,
            editable: _textFieldFocus.editableText,
          );
        },
        child: const Text('Show menu'),
      ),
    ),
  ],
)

关键说明 #

• 焦点处理：必须确保TextFormField处于聚焦状态，否则TextInput.showContextMenu无法正确唤起系统菜单。
• 选择范围：可以根据需求调整菜单对应的文本范围，比如如果只想在光标位置弹出菜单，就把menuRange设置为TextRange(start: _textController.selection.baseOffset, end: _textController.selection.baseOffset)。
• 原生菜单适配：这个方法会自动适配iOS和Android的系统原生上下文菜单，不需要额外处理平台差异，弹出的菜单和长按文本框时的原生菜单完全一致。

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