Flutter网页端：如何将url_launcher的Link组件光标改为指针？

你之前用MouseRegion没生效，是因为onEnter和onExit回调只是返回光标类型，并没有实际应用到组件上。正确的做法是直接使用MouseRegion的cursor属性指定悬停时的光标样式，同时确保组件层级能正确捕获鼠标事件。

解决方案1：给Link外层包裹配置正确的MouseRegion #

直接给MouseRegion设置cursor: SystemMouseCursors.click，无需依赖事件回调，鼠标悬停时自动切换为指针光标：

import 'package:url_launcher/link.dart';

class UserAgreementText extends StatelessWidget {
  const UserAgreementText({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Wrap(
      children: [
        RichText(
          textAlign: TextAlign.center,
          text: TextSpan(
            text: '继续即表示您同意我们的 ',
            style: Theme.of(context).textTheme.bodySmall,
            children: <InlineSpan>[
              WidgetSpan(
                alignment: PlaceholderAlignment.baseline,
                baseline: TextBaseline.alphabetic,
                child: MouseRegion(
                  // 直接指定悬停时的光标样式
                  cursor: SystemMouseCursors.click,
                  child: Link(
                    target: LinkTarget.blank,
                    builder: (context, follow) => Text(
                      "服务条款".tr(),
                      style: theme.textTheme.bodyMedium?.copyWith(
                        fontSize: 12,
                        color: theme.colorScheme.primary,
                      ),
                    ),
                    uri: Uri.parse(Constants.legals.tos),
                  ),
                ),
              ),
              const TextSpan(text: ' 和 '),
              WidgetSpan(
                alignment: PlaceholderAlignment.baseline,
                baseline: TextBaseline.alphabetic,
                child: MouseRegion(
                  cursor: SystemMouseCursors.click,
                  child: Link(
                    target: LinkTarget.blank,
                    builder: (context, follow) => Text(
                      "隐私政策".tr(),
                      style: theme.textTheme.bodyMedium?.copyWith(
                        fontSize: 12,
                        color: theme.colorScheme.primary,
                      ),
                    ),
                    uri: Uri.parse(Constants.legals.pp),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

解决方案2：在Link的builder中包裹Text #

把Text嵌套在MouseRegion里，通过Link的builder返回，更贴合组件结构：

// 以其中一个Link为例
WidgetSpan(
  alignment: PlaceholderAlignment.baseline,
  baseline: TextBaseline.alphabetic,
  child: Link(
    target: LinkTarget.blank,
    builder: (context, follow) => MouseRegion(
      cursor: SystemMouseCursors.click,
      child: Text(
        "服务条款".tr(),
        style: theme.textTheme.bodyMedium?.copyWith(
          fontSize: 12,
          color: theme.colorScheme.primary,
        ),
      ),
    ),
    uri: Uri.parse(Constants.legals.tos),
  ),
),

原写法失效原因 #

onEnter和onExit仅作为事件通知回调，它们的返回值不会被系统用来设置光标样式。要修改光标，必须通过MouseRegion的cursor属性直接指定，这是组件专门用于控制光标样式的参数。

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