如何在 .Net maui Blazor Hybrid 中检测滑动手势

Question

我们如何检测 .NET Maui Blazor Hybrid 中的滑动手势？我已经在本机 .NET Maui 中看到了滑动手势示例，但我找不到 .NET Maui Blazor Hybrid 的任何示例。请帮我

Answer 1

.NET Maui Blazor Hybrid没有对滑动手势的内置支持。@ontouch*** EventCallback您可以通过处理各种问题来创建自己的解决方案。这是一个非常基本的SwipeArea组件实现：

SwipeArea.razor:

<div @attributes="UserAttributes" class="@Class" style="@Style"
     @ontouchstart="OnTouchStart" @ontouchstart:stopPropagation
     @ontouchend="OnTouchEnd" @ontouchend:stopPropagation
     @ontouchcancel="OnTouchCancel" @ontouchcancel:stopPropagation>
    @ChildContent
</div>

@code {
    private double? _xDown;
    private double? _yDown;

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public Action<SwipeDirection> OnSwipe { get; set; }

    [Parameter]
    public string Class { get; set; }

    [Parameter]
    public string Style { get; set; }

    [Parameter]
    public Dictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();

    private void OnTouchStart(TouchEventArgs args)
    {
        _xDown = args.Touches[0].ClientX;
        _yDown = args.Touches[0].ClientY;
    }

    private void OnTouchEnd(TouchEventArgs args)
    {
        if (_xDown == null || _yDown == null)
        {
            return;
        }

        var xDiff = _xDown.Value - args.ChangedTouches[0].ClientX;
        var yDiff = _yDown.Value - args.ChangedTouches[0].ClientY;

        if (Math.Abs(xDiff) < 100 && Math.Abs(yDiff) < 100)
        {
            _xDown = null;
            _yDown = null;
            return;
        }

        if (Math.Abs(xDiff) > Math.Abs(yDiff))
        {
            if (xDiff > 0)
            {
                InvokeAsync(() => OnSwipe(SwipeDirection.RightToLeft));
            }
            else
            {
                InvokeAsync(() => OnSwipe(SwipeDirection.LeftToRight));
            }
        }
        else
        {
            if (yDiff > 0)
            {
                InvokeAsync(() => OnSwipe(SwipeDirection.BottomToTop));
            }
            else
            {
                InvokeAsync(() => OnSwipe(SwipeDirection.TopToBottom));
            }
        }

        _xDown = null;
        _yDown = null;
    }

    private void OnTouchCancel(TouchEventArgs args)
    {
        _xDown = null;
        _yDown = null;
    }
}

SwipeDirection.cs：

<div @attributes="UserAttributes" class="@Class" style="@Style"
     @ontouchstart="OnTouchStart" @ontouchstart:stopPropagation
     @ontouchend="OnTouchEnd" @ontouchend:stopPropagation
     @ontouchcancel="OnTouchCancel" @ontouchcancel:stopPropagation>
    @ChildContent
</div>

@code {
    private double? _xDown;
    private double? _yDown;

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public Action<SwipeDirection> OnSwipe { get; set; }

    [Parameter]
    public string Class { get; set; }

    [Parameter]
    public string Style { get; set; }

    [Parameter]
    public Dictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();

    private void OnTouchStart(TouchEventArgs args)
    {
        _xDown = args.Touches[0].ClientX;
        _yDown = args.Touches[0].ClientY;
    }

    private void OnTouchEnd(TouchEventArgs args)
    {
        if (_xDown == null || _yDown == null)
        {
            return;
        }

        var xDiff = _xDown.Value - args.ChangedTouches[0].ClientX;
        var yDiff = _yDown.Value - args.ChangedTouches[0].ClientY;

        if (Math.Abs(xDiff) < 100 && Math.Abs(yDiff) < 100)
        {
            _xDown = null;
            _yDown = null;
            return;
        }

        if (Math.Abs(xDiff) > Math.Abs(yDiff))
        {
            if (xDiff > 0)
            {
                InvokeAsync(() => OnSwipe(SwipeDirection.RightToLeft));
            }
            else
            {
                InvokeAsync(() => OnSwipe(SwipeDirection.LeftToRight));
            }
        }
        else
        {
            if (yDiff > 0)
            {
                InvokeAsync(() => OnSwipe(SwipeDirection.BottomToTop));
            }
            else
            {
                InvokeAsync(() => OnSwipe(SwipeDirection.TopToBottom));
            }
        }

        _xDown = null;
        _yDown = null;
    }

    private void OnTouchCancel(TouchEventArgs args)
    {
        _xDown = null;
        _yDown = null;
    }
}

使用示例：

<SwipeArea OnSwipe="OnSwipe" Class="h-100 pt-1">
    @* wrap the area that you want to detect swipe gestures in SwipeArea component *@
</SwipeArea>

@code {
    private SwipeDirection _swipeDirection = SwipeDirection.None;

    private void OnSwipe(SwipeDirection swipeDirection)
    {
        _swipeDirection = swipeDirection;

        // do stuff based on swipe direction
    }
}