如何在 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,
  ),
),

但无法将TextSpan中的一个包装在Container和MouseRegion中。

- user3808307

---

你可能想订阅并点赞这个问题：https://github.com/flutter/flutter/issues/64769（请勿评论“我也是”） - Ben Hagen

谢谢，我会的。 - user3808307

@BenHagen，有没有一个地方可以让我看到每个Web渠道版本中添加的新功能？谢谢。 - user3808307

我不知道。我时不时地浏览Git提交记录。重要的事情会在发布公告中提到。 - Ben Hagen

显然，WidgetSpan应该能够帮助您解决这个问题。请查看此答案。 - Adrian Moisa

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
      },
  ),
),

- Mahdi Dahouei

---

这很棒，但我们失去了父级的文本样式。 - Lulupointu

这有助于旧版Flutter（在Windows上测试过）。 - ANDYNVT

Answer 2

最近，这个功能已经被添加到了 TextSpan 中。(详情请参见)

从Flutter的master分支的版本号 5647407 开始（可能会在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当你指定一个recognizer时。

- creativecreatorormaybenot