Flutter Web：为句子高亮词添加手型图标及带操作Tooltip问题问询

highlight_text库仅专注于文本高亮展示，不支持添加手型光标及带操作的Tooltip这类交互功能，你可以通过Flutter原生组件组合实现需求：

实现方案 #

1. 带手型光标的可交互高亮文本 #

用RichText+GestureDetector+MouseRegion组合，给高亮文本添加点击交互和手型光标（桌面端），移动端可通过点击波纹反馈替代视觉提示。

2. 带操作选项的交互提示 #

原生Tooltip仅支持文本消息，若需要带操作按钮的自定义提示框，可通过showModalBottomSheet弹出操作菜单，或使用flutter_portal库实现悬浮在高亮文本上方的自定义弹窗。

完整代码示例 #

import 'package:flutter/material.dart';

class InteractiveHighlight extends StatelessWidget {
  final String content;
  final String targetText;
  final Color highlightColor;

  const InteractiveHighlight({
    super.key,
    required this.content,
    required this.targetText,
    required this.highlightColor,
  });

  @override
  Widget build(BuildContext context) {
    final textSegments = content.split(targetText);
    final spans = <InlineSpan>[];

    for (int i = 0; i < textSegments.length; i++) {
      // 添加普通文本段
      spans.add(TextSpan(text: textSegments[i]));
      // 添加高亮交互段
      if (i != textSegments.length - 1) {
        spans.add(
          WidgetSpan(
            child: _HighlightTextWithActions(
              text: targetText,
              color: highlightColor,
            ),
          ),
        );
      }
    }

    return RichText(text: TextSpan(children: spans, style: const TextStyle(fontSize: 16)));
  }
}

class _HighlightTextWithActions extends StatelessWidget {
  final String text;
  final Color color;

  const _HighlightTextWithActions({required this.text, required this.color});

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(
        onTapDown: (_) {
          // 弹出带操作选项的自定义提示框
          showMenu(
            context: context,
            position: const RelativeRect.fromLTRB(0, 40, 0, 0),
            items: const [
              PopupMenuItem(value: 'copy', child: Text('复制')),
              PopupMenuItem(value: 'search', child: Text('搜索')),
              PopupMenuItem(value: 'share', child: Text('分享')),
            ],
          );
        },
        child: Text(
          text,
          style: TextStyle(color: color, fontWeight: FontWeight.w600),
        ),
      ),
    );
  }
}

// 使用示例
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: InteractiveHighlight(
            content: '请修改这段文本中的指定部分，添加交互和操作提示',
            targetText: '指定部分',
            highlightColor: Colors.redAccent,
          ),
        ),
      ),
    );
  }
}

补充说明 #

• 手型光标通过MouseRegion的cursor属性实现，仅在桌面平台生效；移动端可替换为InkWell组件添加点击波纹效果
• 示例中用showMenu实现操作选项弹窗，若需要更贴近示例的悬浮Tooltip样式，可引入flutter_portal库实现精准定位的自定义弹窗

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