如何将鼠标光标放在 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
      },
  ),
),

Answer 2

最近，此功能已 added to TextSpans。

从 master 上的 Flutter 5647407 开始（可能会在 2.1.0 版本中），鼠标光标 可点击 （手形光标）默认。因此，除了升级 Flutter 之外，您无需采取任何其他操作。

手动指定

您可以手动指定 mouseCursor 属性:

TextSpan(
  text: 'single tap',
  style: style,
  mouseCursor: MaterialStateMouseCursor.clickable,
  recognizer: TapGestureRecognizer()
    ..onTap = () {
      // single tapped
    },
),

此外，现在有 onEnter 和 onExit 回调来响应鼠标进入和离开文本范围。

默认SystemMouseCursors.click

如果您使用 look at the commit，您会注意到当您指定 recognizer 时，默认值现在是 SystemMouseCursors.click 。