识别轻扫手势

2025-02-25

.NET Multi-platform App UI (.NET MAUI) 轻扫手势识别器可检测手指何时在水平或垂直方向上滑过屏幕，它通常用于启动内容导航。

在 .NET MAUI 中，拖动手势识别由 SwipeGestureRecognizer 类提供。此类定义了以下属性：

Command，类型为 ICommand，在识别轻扫手势时执行。
CommandParameter，类型为 object，是传递给 Command 的参数。
Direction，类型为 SwipeDirection，用于定义方向
Threshold，类型为 uint，表示识别轻扫所必须满足的最小轻扫距离，其以与设备无关的单位表示。此属性的默认值为 100，这意味着任何少于 100 个与设备无关的单位的轻扫都将被忽略。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

SwipeGestureRecognizer 还定义在识别轻扫时引发的 Swiped 事件。 Swiped 事件随附的 SwipedEventArgs 对象定义了以下属性：

Direction，类型为 SwipeDirection，指示轻扫手势的方向。
Parameter，类型为 object，指示 CommandParameter 属性传递的值（如已定义）。

创建 SwipeGestureRecognizer

要使 View 识别轻扫手势，请创建 SwipeGestureRecognizer 对象，将 Direction 属性设置为 SwipeDirection 枚举值（Left、Right、Up 或 Down），选择性设置 Threshold 属性，处理 Swiped 事件，并将新的手势识别器添加到视图上的 GestureRecognizers 集合。以下示例显示附加到 BoxView 的 SwipeGestureRecognizer：

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

等效 C# 代码如下：

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeGestureRecognizer leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);

识别轻扫方向

可以将 SwipeGestureRecognizer.Direction 属性设置为 SwipeDirection 枚举中的单个值或多个值。这样，就可以在响应多个方向的轻扫时引发 Swiped 事件。但是，约束是单个 SwipeGestureRecognizer 只能识别同一个轴上的轻扫手势。因此，可以通过将 Direction 属性设置为 Left 和 Right 来识别水平轴上的轻扫手势：

<SwipeGestureRecognizer Direction="Left,Right" Swiped="OnSwiped"/>

同样，可以通过将 Direction 属性设置为 Up 和 Down 来识别垂直轴上的轻扫手势：

SwipeGestureRecognizer swipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up | SwipeDirection.Down };

或者，可以创建每个轻扫方向的 SwipeGestureRecognizer 来识别每个方向的轻扫手势：

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Right" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Up" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Down" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

等效 C# 代码如下：

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeGestureRecognizer leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  rightSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Right };
rightSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  upSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up };
upSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  downSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Down };
downSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);
boxView.GestureRecognizers.Add(rightSwipeGesture);
boxView.GestureRecognizers.Add(upSwipeGesture);
boxView.GestureRecognizers.Add(downSwipeGesture);

响应轻扫

Swiped 事件的处理程序可以响应已识别的轻扫：

void OnSwiped(object sender, SwipedEventArgs e)
{
    switch (e.Direction)
    {
        case SwipeDirection.Left:
            // Handle the swipe
            break;
        case SwipeDirection.Right:
            // Handle the swipe
            break;
        case SwipeDirection.Up:
            // Handle the swipe
            break;
        case SwipeDirection.Down:
            // Handle the swipe
            break;
    }
}

可以检查 SwipedEventArgs 以确定轻扫方向，并根据需要使用自定义逻辑响应轻扫手势。可以从事件参数的 Direction 属性获得轻扫方向，该属性将设置为 SwipeDirection 枚举中的某个值。此外，事件参数还具有 Parameter 属性，如果定义了该属性，则该属性将设置为 CommandParameter 属性中的值。

创建轻扫容器

以下示例中显示的 SwipeContainer 类是通用轻扫识别类，它包装在 View 中以执行轻扫手势识别：

public class SwipeContainer : ContentView
{
    public event EventHandler<SwipedEventArgs> Swipe;

    public SwipeContainer()
    {
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Left));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Right));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Up));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Down));
    }

    SwipeGestureRecognizer GetSwipeGestureRecognizer(SwipeDirection direction)
    {
        SwipeGestureRecognizer swipe = new SwipeGestureRecognizer { Direction = direction };
        swipe.Swiped += (sender, e) => Swipe?.Invoke(this, e);
        return swipe;
    }
}

SwipeContainer 类创建所有四个轻扫方向的 SwipeGestureRecognizer 对象，并附加 Swipe 事件处理程序。这些事件处理程序调用由 SwipeContainer 定义的 Swipe 事件。

下面的 XAML 代码示例演示包装 BoxView 的 SwipeContainer 类：

<StackLayout>
    <local:SwipeContainer Swipe="OnSwiped" ...>
        <BoxView Color="Teal" ... />
    </local:SwipeContainer>
</StackLayout>

在此示例中，当 BoxView 接收到轻扫手势时，将引发 SwipeGestureRecognizer 中的 Swiped 事件。这由 SwipeContainer 类处理，该类引发自己的 Swipe 事件。此 Swipe 事件在页上进行处理。然后可以检查 SwipedEventArgs 以确定轻扫方向，并根据需要使用自定义逻辑响应轻扫手势。

等效 C# 代码如下：

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeContainer swipeContainer = new SwipeContainer { Content = boxView, ... };
swipeContainer.Swipe += (sender, e) =>
{
  // Handle the swipe
};

StackLayout stackLayout = new StackLayout();
stackLayout.Add(swipeContainer);

通过

识别轻扫手势

创建 SwipeGestureRecognizer

识别轻扫方向

响应轻扫

创建轻扫容器

反馈

其他资源