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

Question

当前设置（使用 `launch`）

我想在我的 Flutter 网络应用程序中使用 links，目前是这样做的（使用 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`

此代码片段在三方面做对了：

完全适用于移动设备
在网页上悬停时显示点击光标
在大多数情况下在网络上打开 link

not 使用 `launch`

有什么作用

但是，与在常规 HTML:

中使用 <a> 锚元素相比，我在网络上遇到了很多问题

Link预览未显示在浏览器的左下角。
这是 常规 HTML 页面上的样子：

Links 似乎比常规网络应用
打开更慢
Safari 完全阻止了我的 link（“阻止了弹出窗口”）

特别是 links 在 Safari 上不工作以及 link 预览不显示我真的需要得到解决才能有一个流畅的网络体验。我该如何实现？

Answer 1

解决方案

url_launcher package actually has a built-in solution for this that not many are aware of: the link library. This library provides a Link widget 修复了所有提到的问题：

悬停时显示 link 预览（通过在网络上插入 <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 以及定义如何 link 已打开。 通读 the docs to learn more.

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

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

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

How do I use <a> anchor elements in Flutter web?

html

dart

flutter

flutter-web

当前设置（使用 `launch`）

什么有效使用 `launch`

not 使用 `launch`

解决方案

用法

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

How do I use <a> anchor elements in Flutter web?

html

dart

flutter

flutter-web

当前设置（使用 launch）

什么有效使用 launch

not 使用 launch

解决方案

用法

当前设置（使用 `launch`）

什么有效使用 `launch`

not 使用 `launch`