Flutter如何实现点击TextField直接弹出文本选择工具栏而非仅长按触发

完全可以借助Flutter内置文本控件能力实现，不需要自定义弹窗，TextField底层依赖的EditableText控件本身就提供了触发原生文本选择工具栏的API，实现效果和长按触发的工具栏完全一致。

核心代码实现 #

直接在onTap方法中添加如下逻辑即可：

onTap: () {
  // 1、申请当前TextField获取焦点
  FocusScope.of(context).requestFocus(phoneController.focusNode);
  
  // 可选：如果需要弹出工具栏时自动全选已有文本，添加这段逻辑，不需要可以删除
  if (phoneController.text.isNotEmpty) {
    phoneController.selection = TextSelection(
      baseOffset: 0,
      extentOffset: phoneController.text.length,
    );
  }

  // 等待组件渲染完成后调用内置方法弹出工具栏
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final editableState = context.findAncestorStateOfType<EditableTextState>();
    editableState?.showToolbar();
  });
}

注意事项 #

• 如果不需要全选文本，仅需要在光标定位的位置弹出工具栏，删除设置phoneController.selection的代码即可。
• 要确保TextField的enableInteractiveSelection参数没有被设置为false，该参数默认值为true，关闭后会禁用文本选择相关能力，工具栏无法正常弹出。
• 该实现调用的是Flutter原生的工具栏逻辑，会自动适配Android、iOS等不同平台的默认工具栏样式，包含系统默认提供的复制、粘贴、全选等操作选项。

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