Flutter Web：鼠标拖动实现多行多段文本选中方案求助

针对你遇到的SelectableText仅支持点击选中的问题，以下是几个可行的解决思路：

1. 自定义手势监听 + 手动控制文本选区 #

通过GestureDetector监听鼠标的按下、拖动、抬起事件，结合TextPainter计算鼠标坐标对应的文本位置，手动更新SelectableText的选区状态。

示例代码 #

class DraggableSelectableText extends StatefulWidget {
  final String text;
  const DraggableSelectableText(this.text, {super.key});

  @override
  State<DraggableSelectableText> createState() => _DraggableSelectableTextState();
}

class _DraggableSelectableTextState extends State<DraggableSelectableText> {
  final GlobalKey _textKey = GlobalKey();
  TextSelection? _selection;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanDown: (details) => _handleDragStart(details),
      onPanUpdate: (details) => _handleDragUpdate(details),
      onPanEnd: (_) => _handleDragEnd(),
      child: SelectableText(
        widget.text,
        key: _textKey,
        selection: _selection,
        selectionControls: MaterialTextSelectionControls(),
        onSelectionChanged: (selection, cause) {
          if (cause != SelectionChangedCause.drag) {
            setState(() => _selection = selection);
          }
        },
      ),
    );
  }

  void _handleDragStart(DragDownDetails details) {
    final renderBox = _textKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;
    final localOffset = renderBox.globalToLocal(details.globalPosition);
    final textPainter = _createTextPainter();
    final textPosition = textPainter.getPositionForOffset(localOffset);
    setState(() {
      _selection = TextSelection(
        baseOffset: textPosition.offset,
        extentOffset: textPosition.offset,
      );
    });
  }

  void _handleDragUpdate(DragUpdateDetails details) {
    final renderBox = _textKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null || _selection == null) return;
    final localOffset = renderBox.globalToLocal(details.globalPosition);
    final textPainter = _createTextPainter();
    final textPosition = textPainter.getPositionForOffset(localOffset);
    setState(() {
      _selection = TextSelection(
        baseOffset: _selection!.baseOffset,
        extentOffset: textPosition.offset,
      );
    });
  }

  void _handleDragEnd() {
    // 可选：处理选区确认后的逻辑，比如复制、高亮等
  }

  TextPainter _createTextPainter() {
    final defaultStyle = DefaultTextStyle.of(context).style;
    return TextPainter(
      text: TextSpan(text: widget.text, style: defaultStyle),
      textDirection: TextDirection.ltr,
      textScaleFactor: MediaQuery.of(context).textScaleFactor,
    )..layout(maxWidth: MediaQuery.of(context).size.width);
  }
}

2. 基于RichText自定义选区渲染 #

如果SelectableText的定制性不够，可直接使用RichText组件，自己维护选区状态并给选中的文本段添加高亮样式。核心逻辑同样是通过鼠标事件计算文本位置，然后拆分文本为未选中和选中的片段，分别应用不同样式。

3. 调用Web原生Selection API（仅限Web平台） #

利用dart:js库调用浏览器原生的文本选择API，直接让浏览器处理拖动选中文本的逻辑，再将选区信息同步到Flutter状态中。这种方式能完全复用浏览器原生的选中文本体验，适合纯Web场景。

注意事项 #

• 使用TextPainter时，务必保证其样式、布局（如maxWidth）与实际显示的文本组件一致，否则会出现位置计算偏差。
• 若文本包含复杂样式（如不同字体、字号），需要调整TextPainter的TextSpan来匹配实际文本结构。
• 测试时注意处理鼠标拖动超出文本边界的情况，避免选区范围越界。

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