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

现在，它工作正常，但是在文本上滚动时我不能有手形光标？

我正在寻找如何做到这一点并找到了这个

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

最近，该功能已添加TextSpan到s中。

从 Flutter5647407开始master（可能会在发布版本中），默认情况下2.1.0鼠标光标是可点击的（手形光标）。所以除了升级Flutter之外，您不需要采取任何操作。

手动指定

您可以手动指定mouseCursor属性：

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

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

默认SystemMouseCursors.click

如果您查看提交，您会注意到SystemMouseCursors.click 当您指定a时，默认值为 now recognizer。