MAUI：如何为Span添加悬停下划线及已访问链接变色效果

API 探路者

2026-6-26

实现悬停下划线与已访问链接颜色修改

因为Span本身没有内置的悬停状态控制，我们可以通过指针进入/离开事件来动态切换下划线，同时通过维护已访问链接集合来修改已点击链接的颜色。

步骤1：维护已访问链接状态

先定义一个静态集合来记录已访问的链接，避免页面重建后丢失状态：

private static readonly HashSet<string> _visitedLinks = new HashSet<string>();

步骤2：修改Span的事件与样式控制

更新原有代码，添加指针事件处理逻辑，动态切换下划线和链接颜色：

var formattedString = new FormattedString();
var link = "http://www.google.com/";
var hyperlinkSpan = new Span { Text = "Click me" };

// 初始化样式：未访问时无下划线，设置默认链接颜色
hyperlinkSpan.TextColor = _visitedLinks.Contains(link) ? Colors.Purple : Colors.Blue;
hyperlinkSpan.TextDecorations = TextDecorations.None;

// 鼠标悬停时添加下划线
hyperlinkSpan.PointerEntered += (s, e) =>
{
    if (s is Span span)
    {
        span.TextDecorations = TextDecorations.Underline;
    }
};

// 鼠标离开时移除下划线
hyperlinkSpan.PointerExited += (s, e) =>
{
    if (s is Span span)
    {
        span.TextDecorations = TextDecorations.None;
    }
};

// 点击后标记为已访问并修改颜色
hyperlinkSpan.GestureRecognizers.Add(new TapGestureRecognizer
{
    Command = new Command(async () =>
    {
        await Launcher.OpenAsync(new Uri(link)).ConfigureAwait(true);
        if (!_visitedLinks.Contains(link))
        {
            _visitedLinks.Add(link);
            hyperlinkSpan.TextColor = Colors.Purple;
        }
    })
});

formattedString.Spans.Add(hyperlinkSpan);