如何在Xamarin Forms中点击Label时获取位置并高亮单句文本

现有代码问题 #

• Tap事件未获取点击坐标，无法定位到点击对应的文本位置
• 文本拆分逻辑错误，使用逗号+句号拆分不仅不符合整句拆分要求，还会丢失原始标点，导致渲染文本残缺
• 高亮判断v == v为恒真逻辑，会导致所有文本全量高亮
• XAML中Label的x:Name为LoremipsumText，后台代码误用Loremipsum调用，会触发空引用异常
• 构造函数中直接获取Label的Text属性，此时绑定还未生效，会拿到空值

正确实现步骤 #

1. XAML代码（仅需确认命名和原逻辑一致即可） #

<StackLayout>
    <Label Text="{Binding Loremipsum.Content}"
           x:Name="LoremipsumText"
           FontSize="18"
           FontFamily="Font4"
           TextTransform="None"
           TextColor="White">
        <Label.GestureRecognizers>
            <TapGestureRecognizer Tapped="btnHighLight"></TapGestureRecognizer>
        </Label.GestureRecognizers>
    </Label>
</StackLayout>

2. 后台C#逻辑实现 #

核心逻辑：

1. 监听Label文本绑定完成事件，获取完整文本后提前记录每个整句的起始、结束索引区间
2. 点击时通过GetPositionFromPoint方法获取点击位置对应的字符索引
3. 匹配字符索引所属的句子区间，构造富文本渲染高亮效果

public partial class LoremipsumInfoPage : ContentPage
{
    // 存储每个句子的起始索引、结束索引、文本内容
    private List<(int StartIndex, int EndIndex, string Sentence)> _sentenceRanges = new List<(int, int, string)>();
    private string _fullText;

    public LoremipsumInfoPage()
    {
        InitializeComponent();
        // 监听文本绑定完成事件，避免构造函数拿不到绑定值
        LoremipsumText.PropertyChanged += LoremipsumText_PropertyChanged;
    }

    private void LoremipsumText_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(Label.Text) && !string.IsNullOrEmpty(LoremipsumText.Text))
        {
            _fullText = LoremipsumText.Text;
            InitSentenceRanges();
        }
    }

    // 初始化每个句子的索引区间
    private void InitSentenceRanges()
    {
        _sentenceRanges.Clear();
        int currentStart = 0;
        for (int i = 0; i < _fullText.Length; i++)
        {
            // 按句号拆分整句，可根据需求新增逗号等拆分标识
            if (_fullText[i] == '.')
            {
                // 截取句子，包含句号
                var sentence = _fullText.Substring(currentStart, i - currentStart + 1).TrimStart();
                _sentenceRanges.Add((currentStart, i, sentence));
                currentStart = i + 1;
            }
        }
        // 处理最后一句没有句号的情况
        if (currentStart < _fullText.Length)
        {
            var sentence = _fullText.Substring(currentStart).TrimStart();
            _sentenceRanges.Add((currentStart, _fullText.Length - 1, sentence));
        }
    }

    private void btnHighLight(object sender, TappedEventArgs e)
    {
        if (_sentenceRanges.Count == 0 || string.IsNullOrEmpty(_fullText)) return;

        // 获取点击位置相对于Label的坐标
        var tapPosition = e.GetPosition(LoremipsumText).Value;
        // 获取点击位置对应的字符索引，该方法需要Xamarin Forms 5.0及以上版本支持
        var tapCharIndex = LoremipsumText.GetPositionFromPoint(tapPosition);
        if (tapCharIndex == -1) return;

        // 匹配点击索引所属的句子
        var targetSentence = _sentenceRanges.FirstOrDefault(s => s.StartIndex <= tapCharIndex && s.EndIndex >= tapCharIndex);
        if (targetSentence == default) return;

        // 构造富文本高亮
        var formattedString = new FormattedString();
        foreach (var sentence in _sentenceRanges)
        {
            if (sentence.StartIndex == targetSentence.StartIndex)
            {
                // 高亮当前点击的句子
                formattedString.Spans.Add(new Span 
                { 
                    Text = sentence.Sentence, 
                    ForegroundColor = Colors.White, 
                    BackgroundColor = Colors.Red 
                });
            }
            else
            {
                // 正常样式
                formattedString.Spans.Add(new Span 
                { 
                    Text = sentence.Sentence, 
                    ForegroundColor = Colors.White,
                    BackgroundColor = Colors.Transparent
                });
            }
        }
        LoremipsumText.FormattedText = formattedString;
    }
}

兼容说明 #

如果你的Xamarin Forms版本低于5.0，GetPositionFromPoint方法无法直接使用，需要通过平台自定义渲染器实现坐标到字符索引的转换逻辑，分句逻辑无需修改。

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