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

Posted 2023-02-23

【中文标题】如何在 Flutter web 中使用 <a> 锚元素？

【英文标题】：How do I use <a> anchor elements in Flutter web?

【发布时间】：2021-10-01 15:06:06

【问题描述】：

当前设置（使用launch）

我想在我的 Flutter Web 应用程序中使用链接，目前这样做（使用 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

这段代码 sn-p 做对了三件事：

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

not 使用 launch 有什么作用

但是，与在常规 html 中使用 <a> 锚元素相比，我在网络上遇到了许多问题：

浏览器左下角不显示链接预览。 这就是它在

常规 HTML

页面上的样子：

链接的打开速度似乎比常规网络应用程序中的慢

Safari 完全阻止了我的链接（“阻止了弹出窗口”）

尤其是无法在 Safari 上运行的链接以及未显示的链接预览，我真的需要得到解决才能获得流畅的网络体验。我如何做到这一点？

【参考方案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 小部件 - 您实际上可以使用 anything，例如一个按钮。

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