html - 如何在 Flutter web 中使用 anchor 元素？

Question

当前设置(使用 launch )

我想在我的 Flutter 网络应用程序中使用链接，目前是这样做的(使用 url_launcher package ):

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起作用

但是，与使用 <a> 相比，我在网络上遇到了很多问题常规 HTML 中的 anchor 元素:

• 链接预览未显示在浏览器的左下角。
  这是它在常规 HTML 页面上的样子:

• 链接似乎比常规网络应用中的链接打开更慢

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

特别是在 Safari 上无法使用的链接以及未显示的链接预览我真的需要得到解决才能获得流畅的网络体验。我该如何实现？

Answer 1

解决方案

url_launcher package实际上有一个没有多少人知道的内置解决方案:link library .这个库提供了一个 Link widget解决了所有提到的问题:

• 悬停时显示链接预览(通过在网络上插入 <a> 元素)。
• 适用于所有浏览器(不会作为弹出窗口被阻止，从不)。
• 打开速度与普通 HTML 页面一样快。
• 默认情况下也适用于移动设备。

用法

Link小部件可以这样使用:

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 一起打开它定义了如何打开链接。 通读 the docs to learn more .

现在，Link小部件为您提供了一个 builder通过 followLink打回来。您只需根据需要的点击操作调用它(例如将其传递给 GestureDetector)。
您不必使用 Text小部件 - 你实际上可以使用任何东西，例如一个按钮。

请注意 <a>悬停在子小部件占用的整个区域时，将显示 anchor 预览。所以尽量不要让按钮/ child 变得非常大:)