如何在Xamarin Forms中结合GestureRecognizers与Effects实现点击高亮？

嘿，这个需求我之前做项目时也碰到过～类似ListView的选中高亮效果，不是必须用动画，但加动画能让交互更自然顺滑：如果只是要给用户一个即时的点击反馈，直接切换背景色就够；如果想让高亮效果更柔和（比如渐入渐出的过渡），动画会是更好的选择。

方案1：无动画快速切换（简单直接） #

这种方式适合需要即时反馈的场景，点击时立刻切换到高亮色，之后可以选择自动恢复或者保持高亮（取决于你的业务需求）。

在你的Preferences_Clicked事件里可以这么写：

private void Preferences_Clicked(object sender, EventArgs e)
{
    if (sender is StackLayout targetLayout)
    {
        // 先记录原背景色（如果需要自动恢复的话）
        var originalColor = targetLayout.BackgroundColor;
        
        // 设置高亮色（这里用浅灰色，你可以换成和App主题匹配的颜色）
        targetLayout.BackgroundColor = Color.LightGray;
        
        // 可选：延迟200毫秒后恢复原背景色，模拟ListView点击后高亮自动消失的效果
        Task.Delay(200).ContinueWith(_ =>
        {
            // 记得回到主线程更新UI
            Device.BeginInvokeOnMainThread(() =>
            {
                targetLayout.BackgroundColor = originalColor;
            });
        });
    }
}

方案2：加动画让过渡更顺滑 #

如果想要更细腻的交互体验，比如背景色从原颜色平滑过渡到高亮色，再慢慢恢复，就可以用动画实现。

Xamarin.Forms 示例 #

private async void Preferences_Clicked(object sender, EventArgs e)
{
    if (sender is StackLayout targetLayout)
    {
        var originalColor = targetLayout.BackgroundColor;
        var highlightColor = Color.LightGray;
        
        // 平滑过渡到高亮色（100毫秒完成动画）
        await targetLayout.ColorTo(originalColor, highlightColor, 100, (currentColor) => targetLayout.BackgroundColor = currentColor);
        
        // 高亮状态停留200毫秒
        await Task.Delay(200);
        
        // 平滑恢复原颜色
        await targetLayout.ColorTo(highlightColor, originalColor, 100, (currentColor) => targetLayout.BackgroundColor = currentColor);
    }
}

MAUI 示例（MAUI移除了ColorTo扩展方法，需自定义动画） #

private async void Preferences_Clicked(object sender, EventArgs e)
{
    if (sender is StackLayout targetLayout)
    {
        var originalColor = targetLayout.BackgroundColor;
        var highlightColor = Colors.LightGray;
        
        // 自定义背景色过渡动画
        await targetLayout.Animate("Highlight", progress =>
        {
            targetLayout.BackgroundColor = Color.FromRgba(
                originalColor.Red + (highlightColor.Red - originalColor.Red) * progress,
                originalColor.Green + (highlightColor.Green - originalColor.Green) * progress,
                originalColor.Blue + (highlightColor.Blue - originalColor.Blue) * progress,
                originalColor.Alpha
            );
        }, length: 100);
        
        await Task.Delay(200);
        
        // 恢复原颜色的动画
        await targetLayout.Animate("Unhighlight", progress =>
        {
            targetLayout.BackgroundColor = Color.FromRgba(
                highlightColor.Red + (originalColor.Red - highlightColor.Red) * progress,
                highlightColor.Green + (originalColor.Green - highlightColor.Green) * progress,
                highlightColor.Blue + (originalColor.Blue - highlightColor.Blue) * progress,
                originalColor.Alpha
            );
        }, length: 100);
    }
}

额外小Tips #

• 如果页面上有多个这样的可点击StackLayout，建议封装成自定义控件，避免重复写相同的事件逻辑；
• 高亮色尽量和你的App主题色调保持一致，别用太突兀的颜色影响整体视觉；
• 如果需要实现“持久选中”（比如点击后一直高亮，直到点击其他布局才恢复），可以维护一个全局的StackLayout引用，每次点击新布局时，先恢复之前选中布局的背景色，再高亮当前的。

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