Flutter Web项目中如何正确使用<a>锚点元素实现链接功能

原有方案问题根源 #

你之前手写launch方法的逻辑，底层在Web端是调用window.open实现跳转，属于JS主动触发的弹窗行为，所以会被Safari的弹窗拦截规则拦截，同时因为没有生成原生<a>标签，所以不会触发浏览器的链接预览特性。

修复方案 #

直接使用url_launcher官方提供的Link组件替换现有手写的点击跳转逻辑，该组件底层对Web场景做了原生锚点适配，完全解决你提到的问题，同时保留全平台兼容能力。

首先确保你的url_launcher依赖版本≥6.1.0，之后替换原有代码即可：

import 'package:url_launcher/link.dart';
import 'package:flutter/material.dart';

// 替换原有跳转组件代码
return Link(
  uri: Uri.parse('https://creativemaybeno.dev'),
  // 配置打开方式：LinkTarget.blank为新窗口打开，LinkTarget.self为当前页打开
  target: LinkTarget.blank,
  builder: (BuildContext context, FollowLink? openLink) {
    return GestureDetector(
      onTap: openLink,
      child: const Text(
        'my amazing link',
        style: TextStyle(
          decoration: TextDecoration.underline,
          // 可自定义任意文本样式
        ),
      ),
    );
  },
);

Link组件已经内置了hover时的点击光标逻辑，无需额外包裹MouseRegion，如果有自定义光标需求再额外添加即可。

方案收益 #

• 完全兼容原有移动端逻辑，全平台表现一致
• Web端hover时自动触发浏览器原生的链接地址预览，和普通HTML的<a>标签效果完全一致
• 走原生锚点跳转逻辑，不会触发Safari弹窗拦截，跳转速度和原生Web链接一致
• 支持任意样式的子组件，自定义灵活度高

内容的提问来源于stack exchange，提问作者creativecreatorormaybenot