如何在flutter_markdown的MarkdownBody上获取长按触发的元素？

flutter_markdown没有直接提供长按获取元素的内置API，你可以通过自定义节点构建逻辑，给目标元素添加长按监听并记录元素信息，具体实现如下：

核心思路 #

通过MarkdownBody的builder参数拦截每个Markdown节点的构建过程，给需要响应长按的元素（如链接、文本、图片等）包裹GestureDetector，在长按回调中传递该元素的类型、内容等数据，再弹出操作菜单。

具体实现步骤 #

1. 拦截节点构建：利用builder参数对不同类型的Markdown节点进行自定义处理；
2. 添加长按监听：给目标节点包裹GestureDetector，实现onLongPress回调；
3. 传递元素数据：在回调中把元素的关键信息（如链接地址、文本内容、图片URL等）传入菜单逻辑；
4. 弹出操作菜单：通过showMenu或showModalBottomSheet展示对应操作选项。

代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:markdown/markdown.dart' as md;

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

  @override
  State<MarkdownLongPressHandler> createState() => _MarkdownLongPressHandlerState();
}

class _MarkdownLongPressHandlerState extends State<MarkdownLongPressHandler> {
  final String _sampleMarkdown = '''
### 测试内容
这是一段可长按复制的普通文本。
[访问示例网站](https://example.com)
![示例图片](https://picsum.photos/300/200)
''';

  void _showActionMenu(BuildContext context, Map<String, dynamic> elementInfo) {
    // 可通过TapDownDetails获取长按位置，调整菜单弹出坐标
    showMenu(
      context: context,
      position: RelativeRect.fromLTRB(100, 100, 0, 0), // 可根据实际长按位置动态调整
      items: [
        if (elementInfo['type'] == 'link')
          PopupMenuItem(
            child: const Text('复制链接地址'),
            onTap: () => debugPrint('复制链接：${elementInfo['url']}'),
          ),
        if (elementInfo['type'] == 'text')
          PopupMenuItem(
            child: const Text('复制文本'),
            onTap: () => debugPrint('复制文本：${elementInfo['content']}'),
          ),
        if (elementInfo['type'] == 'image')
          PopupMenuItem(
            child: const Text('保存图片'),
            onTap: () => debugPrint('保存图片：${elementInfo['url']}'),
          ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Markdown长按操作演示')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: MarkdownBody(
          data: _sampleMarkdown,
          builder: (context, node, child) {
            // 处理链接节点
            if (node is md.Link) {
              return GestureDetector(
                onLongPress: () => _showActionMenu(context, {
                  'type': 'link',
                  'url': node.destination,
                  'content': node.textContent,
                }),
                child: child,
              );
            }
            // 处理文本节点
            if (node is md.Text) {
              return GestureDetector(
                onLongPress: () => _showActionMenu(context, {
                  'type': 'text',
                  'content': node.text,
                }),
                child: child,
              );
            }
            // 处理图片节点
            if (node is md.Image) {
              return GestureDetector(
                onLongPress: () => _showActionMenu(context, {
                  'type': 'image',
                  'url': node.destination,
                  'alt': node.alt,
                }),
                child: child,
              );
            }
            // 其他节点保持原有构建逻辑
            return child;
          },
        ),
      ),
    );
  }
}

额外说明 #

• 可根据需求扩展支持更多节点类型（如标题、列表项等），只需判断对应的markdown库中的节点类型；
• 若需要精准定位菜单弹出位置，可使用GestureDetector的onLongPressDown回调获取TapDownDetails，将全局坐标转换为相对位置后传入showMenu的position参数；
• 文本节点可能会被拆分为多个小节点（如带样式的文本片段），可根据业务需求合并或单独处理。

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