如何在MAUI控件中实现Jetpack Compose风格的点击动画（非Button）

要实现类似Jetpack Compose clickable 修饰符的点击动画效果，不用Button控件的话，可以通过以下几种方案实现：

方案1：使用VisualStateManager（推荐，XAML原生实现） #

利用MAUI的VisualStateManager定义控件在**按下（Pressed）和正常（Normal）**状态下的视觉变化，比如调整透明度、背景色或缩放比例，实现流畅的点击反馈。

修改你的Grid控件代码如下：

<Grid Grid.Row="1" Padding="8" Background="red">
    <Grid.GestureRecognizers>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
    </Grid.GestureRecognizers>
    <!-- 定义视觉状态组 -->
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="CommonStates">
            <VisualState Name="Normal"/>
            <VisualState Name="Pressed">
                <VisualState.Setters>
                    <!-- 按下时的视觉变化 -->
                    <Setter Property="Opacity" Value="0.7"/>
                    <Setter Property="Background" Value="#CCFF0000"/>
                    <Setter Property="Scale" Value="0.98"/>
                </VisualState.Setters>
                <!-- 定义过渡动画，让效果更自然 -->
                <VisualState.Storyboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="Opacity"
                            From="1" To="0.7"
                            Duration="0:0:0.1"/>
                        <DoubleAnimation
                            Storyboard.TargetProperty="Scale"
                            From="1" To="0.98"
                            Duration="0:0:0.1"/>
                    </Storyboard>
                </VisualState.Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <HorizontalStackLayout>
        <Image Source="settings.svg" HeightRequest="16" WidthRequest="16" />
        <Label Text="SETTINGS" />
    </HorizontalStackLayout>
</Grid>

这个方案完全通过XAML实现，无需额外C#代码，过渡动画可按需自定义，适配性强。

方案2：自定义可复用的Behavior #

如果需要在多个控件上复用点击动画逻辑，可以封装一个ClickAnimationBehavior，将动画逻辑独立出来：

首先创建Behavior类：

using Microsoft.Maui.Controls;

public class ClickAnimationBehavior : Behavior<VisualElement>
{
    protected override void OnAttachedTo(VisualElement bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.PointerPressed += OnPointerPressed;
        bindable.PointerReleased += OnPointerReleased;
        bindable.PointerExited += OnPointerReleased;
    }

    protected override void OnDetachingFrom(VisualElement bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.PointerPressed -= OnPointerPressed;
        bindable.PointerReleased -= OnPointerReleased;
        bindable.PointerExited -= OnPointerReleased;
    }

    private async void OnPointerPressed(object sender, EventArgs e)
    {
        if (sender is VisualElement element)
        {
            // 按下时执行缩放+透明度动画
            await Task.WhenAll(
                element.ScaleTo(0.95, 80),
                element.FadeTo(0.7, 80)
            );
        }
    }

    private async void OnPointerReleased(object sender, EventArgs e)
    {
        if (sender is VisualElement element)
        {
            // 释放时恢复原状态
            await Task.WhenAll(
                element.ScaleTo(1, 80),
                element.FadeTo(1, 80)
            );
        }
    }
}

然后在XAML中引用该Behavior（需先添加命名空间xmlns:local="clr-namespace:你的项目命名空间"）：

<Grid Grid.Row="1" Padding="8" Background="red">
    <Grid.GestureRecognizers>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
    </Grid.GestureRecognizers>
    <Grid.Behaviors>
        <local:ClickAnimationBehavior/>
    </Grid.Behaviors>

    <HorizontalStackLayout>
        <Image Source="settings.svg" HeightRequest="16" WidthRequest="16" />
        <Label Text="SETTINGS" />
    </HorizontalStackLayout>
</Grid>

方案3：通过Pointer事件手动触发动画 #

如果不想用VisualState或Behavior，也可以直接监听控件的PointerPressed和PointerReleased事件，手动控制动画流程：

XAML代码：

<Grid Grid.Row="1" Padding="8" Background="red"
      PointerPressed="Grid_PointerPressed"
      PointerReleased="Grid_PointerReleased"
      PointerExited="Grid_PointerReleased">
    <Grid.GestureRecognizers>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
    </Grid.GestureRecognizers>

    <HorizontalStackLayout>
        <Image Source="settings.svg" HeightRequest="16" WidthRequest="16" />
        <Label Text="SETTINGS" />
    </HorizontalStackLayout>
</Grid>

后台C#代码：

private async void Grid_PointerPressed(object sender, EventArgs e)
{
    if (sender is Grid grid)
    {
        await Task.WhenAll(
            grid.ScaleTo(0.95, 80),
            grid.FadeTo(0.7, 80)
        );
    }
}

private async void Grid_PointerReleased(object sender, EventArgs e)
{
    if (sender is Grid grid)
    {
        await Task.WhenAll(
            grid.ScaleTo(1, 80),
            grid.FadeTo(1, 80)
        );
    }
}

以上三种方案都能实现类似Jetpack Compose的点击反馈动画，你可以根据项目需求选择最合适的方式。

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