能否使用.NET MAUI实现如图所示的可下拉关闭覆盖页？

完全可以实现这种支持向下拖动关闭的覆盖页，下面提供两种常用的实现思路和代码示例：

方法一：基于.NET MAUI Popup控件实现 #

.NET MAUI自带的Popup控件可作为基础容器，配合PanGestureRecognizer实现拖动关闭逻辑：

1. 自定义Popup类，添加拖动手势和布局逻辑：

using Microsoft.Maui.Controls;

public class DraggablePopup : Popup
{
    private double _startY;
    private readonly double _closeThreshold = 150; // 触发关闭的拖动距离阈值
    private readonly ContentView _contentView;

    public DraggablePopup(View content)
    {
        BackgroundColor = Color.FromRgba(0, 0, 0, 0.5); // 半透明背景
        HasSystemPadding = false;

        _contentView = new ContentView
        {
            Content = content,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.End, // 初始在底部
        };

        var panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnPanUpdated;
        _contentView.GestureRecognizers.Add(panGesture);

        Content = new AbsoluteLayout
        {
            Children = { _contentView }
        };
    }

    private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {
            case GestureStatus.Started:
                _startY = _contentView.Y;
                break;
            case GestureStatus.Running:
                // 跟随手指移动内容
                _contentView.TranslationY = e.TotalY;
                break;
            case GestureStatus.Completed:
                // 判断拖动距离是否达到阈值
                if (e.TotalY > _closeThreshold)
                {
                    Close();
                }
                else
                {
                    // 回弹到初始位置
                    _contentView.TranslateTo(0, 0, 200);
                }
                break;
        }
    }
}

2. 在页面中调用该Popup：

// 构建Popup内容
var popupContent = new StackLayout
{
    WidthRequest = 350,
    HeightRequest = 400,
    BackgroundColor = Colors.White,
    CornerRadius = new CornerRadius(16, 16, 0, 0),
    Padding = new Thickness(20),
    Children = {
        new Label { Text = "可拖动关闭的覆盖页", FontSize = 18, FontAttributes = FontAttributes.Bold },
        // 添加其他内容控件
    }
};

// 显示Popup
var draggablePopup = new DraggablePopup(popupContent);
await ShowPopupAsync(draggablePopup);

方法二：自定义绝对布局覆盖层 #

如果需要更灵活的布局控制，可在页面的AbsoluteLayout中添加自定义覆盖层，同样通过拖动手势实现关闭：

1. 在页面XAML中添加布局：

<ContentPage ...>
    <AbsoluteLayout>
        <!-- 页面原有内容 -->
        <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
            <Button Text="显示覆盖页" Clicked="ShowOverlay_Clicked"/>
        </StackLayout>

        <!-- 可拖动的覆盖层 -->
        <ContentView x:Name="OverlayView" 
                     AbsoluteLayout.LayoutBounds="0,1,1,AutoSize" 
                     AbsoluteLayout.LayoutFlags="WidthProportional"
                     IsVisible="False"
                     BackgroundColor="White"
                     CornerRadius="16,16,0,0">
            <ContentView.GestureRecognizers>
                <PanGestureRecognizer PanUpdated="OverlayPanUpdated"/>
            </ContentView.GestureRecognizers>
            <StackLayout Padding="20" HeightRequest="400">
                <Label Text="自定义拖动覆盖页" FontSize="18" FontAttributes="Bold"/>
                <!-- 其他内容 -->
            </StackLayout>
        </ContentView>
    </AbsoluteLayout>
</ContentPage>

2. 后台代码处理拖动逻辑：

private double _startY;
private readonly double _closeThreshold = 150;

private void ShowOverlay_Clicked(object sender, EventArgs e)
{
    OverlayView.IsVisible = true;
    // 初始位置在底部
    OverlayView.TranslateTo(0, 0, 200);
}

private void OverlayPanUpdated(object sender, PanUpdatedEventArgs e)
{
    switch (e.StatusType)
    {
        case GestureStatus.Started:
            _startY = OverlayView.Y;
            break;
        case GestureStatus.Running:
            OverlayView.TranslationY = e.TotalY;
            break;
        case GestureStatus.Completed:
            if (e.TotalY > _closeThreshold)
            {
                OverlayView.IsVisible = false;
                OverlayView.TranslationY = 0; // 重置位置
            }
            else
            {
                OverlayView.TranslateTo(0, 0, 200);
            }
            break;
    }
}

两种方法都能实现类似的拖动关闭效果，需要弹窗模态效果就用Popup，需要和页面布局深度融合就用自定义覆盖层。

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