如何在Flutter Web中使用<a>锚元素？

Question

当前设置（使用launch）

我希望在我的Flutter Web应用程序中使用链接，目前我是这样做的（使用url_launcher软件包）:

return MouseRegion(
  cursor: SystemMouseCursors.click,
  child: GestureDetector(
    onTap: () {
      launch('https://creativemaybeno.dev');
    },
    child: const Text(
      'my amazing link',
      style: TextStyle(
        decoration: TextDecoration.underline,
      ),
    ),
  ),
);

使用launch的有效方法

这段代码片段做对了三件事情：

• 在移动设备上完全可用
• 当鼠标悬停时显示点击光标
• 在网页上打开链接（在大多数情况下）

使用launch无法解决的问题

然而，与在正常HTML中使用<a>锚点元素相比，在网页上有很多问题：

• 浏览器左下角不会显示链接预览。
  这是在正常HTML页面上的外观：

• 链接似乎比常规网页应用程序中的链接打开得更慢

• Safari完全阻止我的链接(“阻止了一个弹出窗口”)

尤其是Safari不起作用以及链接预览没有显示的问题，我需要解决，以获得流畅的网页体验。我该如何实现这一点？

- creativecreatorormaybenot

Answer 1

解决方案

url_launcher 包 实际上有一个内置的解决方案，但很少有人知道： link 库。该库提供了一个 Link widget，可以解决以下所有问题：

• 鼠标悬停时显示链接预览（在Web上插入 <a> 元素）。
• 在所有浏览器中都可用（不会被阻止弹出式窗口）。
• 与普通 HTML 页面一样快速打开。
• 默认情况下也适用于移动设备。

用法

可以像这样使用 Link widget：

return MouseRegion(
  cursor: SystemMouseCursors.click,
  child: Link(
    uri: Uri.parse('https://creativemaybeno.dev'),
    target: LinkTarget.blank,
    builder: (context, followLink) {
      return GestureDetector(
        onTap: followLink,
        child: const Text(
          'my amazing link',
          style: TextStyle(
            decoration: TextDecoration.underline,
            // The default link color according to the HTML living standard.
            // See https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3,
            // which defines :link { color: #0000EE; }.
            color: Color(0xff0000ee),
          ),
        ),
      );
    },
  ),
);

如您所见，您只需指定应在点击时打开的uri，以及定义target的方式，即可打开链接。要了解更多信息，请阅读文档。

现在，Link小部件为您提供了一个builder，它传递了一个followLink回调。您只需在所需的on tap操作上调用此函数（例如将其传递给GestureDetector）。
您不必使用Text小部件作为子项 - 您实际上可以使用任何内容，例如按钮。

请注意，在鼠标悬停在子部件占用的整个区域上时，将显示<a>锚点预览。因此，请尽量不要使按钮/子部件过大 :)

- creativecreatorormaybenot