flutter - 如何将鼠标光标放在 Flutter web 中 TextSpan 中的超文本上

Question

我正在使用这样的东西在段落内的文本中建立链接

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'This is a going to be a Text which has '),
      TextSpan(
        text: 'single tap',
        style: style,
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // single tapped
          },
      ),
    ],
  ),
)

现在，它工作正常，但是在文本上滚动时我不能有手形光标？
我正在研究如何做，发现 this

MouseRegion(
  cursor: SystemMouseCursors.click,
  child: Container(
      height: 30,
      width: 30,
      color: Colors.red,
  ),
),

但不可能将 TextSpans 之一包装在 Container 和 MouseRegion 中。

Answer 1

您可以创建自定义 WidgetSpan像这样:

class MouseRegionSpan extends WidgetSpan {
  MouseRegionSpan({
    @required MouseCursor mouseCursor,
    @required InlineSpan inlineSpan,
  }) : super(
          child: MouseRegion(
            cursor: mouseCursor,
            child: Text.rich(
              inlineSpan,
            ),
          ),
        );
}

并包裹您的 TextSpan用它:

MouseRegionSpan(
  mouseCursor: SystemMouseCursors.click,
  inlineSpan: TextSpan(
    text: 'single tap',
    style: style,
    recognizer: TapGestureRecognizer()
      ..onTap = () {
        // single tapped
      },
  ),
),