You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在SelectableText类中实现customMenuBuilder?

用customMenuBuilder实现SelectableText的文本复制功能

直接给你修改后的代码,替换掉废弃的toolbarOptions,通过customMenuBuilder实现文本复制功能:

SelectableText(
  'text',
  cursorColor: Colors.red,
  showCursor: true,
  style: const TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w500,
    color: Colors.black,
  ),
  customMenuBuilder: (context, editableTextState) {
    final start = editableTextState.selection.start;
    final end = editableTextState.selection.end;
    // 只有选中文本时才显示复制选项
    if (start != end) {
      return CustomToolbar(
        anchor: editableTextState.selectionRects.first,
        children: [
          TextButton(
            onPressed: () {
              final selectedText = editableTextState.text.substring(start, end);
              Clipboard.setData(ClipboardData(text: selectedText));
              // 关闭菜单
              editableTextState.hideToolbar();
            },
            child: const Text('复制'),
          ),
        ],
      );
    }
    // 未选中文本时返回null,不显示菜单
    return null;
  },
)

关键说明:

  • customMenuBuilder接收上下文和editableTextState,通过它可以获取选中的文本范围和内容
  • 用CustomToolbar构建自定义菜单,锚点设为选中区域的位置,保证菜单显示位置准确
  • 通过Clipboard.setData完成文本复制,之后调用hideToolbar关闭菜单
  • 仅在文本被选中(start≠end)时显示复制按钮,避免无意义的菜单展示

内容的提问来源于stack exchange,提问作者Olasoji Oluwadamilola

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.31 04:45:42