.NET Maui实现底部NavigationView上方可拖拽上滑展开结构

核心结论 #

可以用自定义拖动逻辑实现需求，也可以基于Bottom Sheet组件改造，但自定义PanGestureRecognizer的方式灵活性更高，能精准控制从NavigationView正上方启动的效果。

实现思路 #

1. 用Grid或AbsoluteLayout构建层级布局：主内容区在上，可拖动面板居中，NavigationView固定在底部
2. 通过PanGestureRecognizer实时响应手指拖动，更新面板的Y轴位置
3. 限制拖动范围，确保面板不会被NavigationView覆盖或超出页面顶部
4. 拖动结束后添加自动吸附动画，提升交互体验

修正后的完整代码示例 #

页面布局（XAML） #

<Grid>
    <!-- 主内容滚动区域 -->
    <ScrollView Grid.Row="0">
        <VerticalStackLayout Padding="20" Spacing="10">
            <Label Text="主页面内容区域" FontSize="Large"/>
            <!-- 这里添加你的页面内容 -->
        </VerticalStackLayout>
    </ScrollView>

    <!-- 可拖动的音乐控制面板容器 -->
    <AbsoluteLayout Grid.Row="0" x:Name="PanelContainer">
        <ContentView 
            x:Name="DraggablePanel"
            BackgroundColor="#1DB954"
            HeightRequest="180"
            AbsoluteLayout.LayoutBounds="0,0,1,AutoSize"
            AbsoluteLayout.LayoutFlags="WidthProportional">
            <ContentView.GestureRecognizers>
                <PanGestureRecognizer PanUpdated="OnPanelDragged" />
            </ContentView.GestureRecognizers>
            
            <!-- 面板内部内容（示例） -->
            <VerticalStackLayout Padding="15" Spacing="10">
                <Label Text="正在播放" TextColor="White" FontSize="Medium"/>
                <Label Text="歌曲名称 - 歌手" TextColor="White" FontSize="Large" FontAttributes="Bold"/>
                <Slider Value="0.3" Minimum="0" Maximum="1" Margin="0,10,0,0"/>
            </VerticalStackLayout>
        </ContentView>
    </AbsoluteLayout>

    <!-- 底部NavigationView（模拟，替换为你的实际NavigationView） -->
    <BoxView 
        Grid.Row="1"
        HeightRequest="60"
        BackgroundColor="#191414"
        x:Name="BottomNav"/>
</Grid>

后台逻辑（C#） #

private double _initialPanelY;
private double _minPanelY; // 面板最低位置（NavigationView正上方）
private double _maxPanelY; // 面板最高位置（页面顶部）

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    
    // 计算面板初始位置：NavigationView顶部减去面板自身高度
    _minPanelY = height - BottomNav.Height - DraggablePanel.Height;
    // 面板最高可拖动到距离顶部20px的位置
    _maxPanelY = 20;
    
    // 初始化面板位置
    if (DraggablePanel != null)
    {
        AbsoluteLayout.SetLayoutBounds(DraggablePanel, new Rect(0, _minPanelY, width, DraggablePanel.Height));
    }
}

private void OnPanelDragged(object sender, PanUpdatedEventArgs e)
{
    var panel = sender as View;
    if (panel == null) return;

    switch (e.StatusType)
    {
        case GestureStatus.Started:
            // 记录拖动开始时的面板Y坐标
            _initialPanelY = AbsoluteLayout.GetLayoutBounds(panel).Y;
            break;
        case GestureStatus.Running:
            // 计算新的Y坐标：初始位置 + 拖动偏移（向上拖动时e.TotalY为负）
            var newY = _initialPanelY + e.TotalY;
            // 限制拖动范围，避免超出边界
            newY = Math.Clamp(newY, _maxPanelY, _minPanelY);
            // 更新面板位置
            AbsoluteLayout.SetLayoutBounds(panel, new Rect(0, newY, panel.Width, panel.Height));
            break;
        case GestureStatus.Completed:
            // 拖动结束后自动吸附：超过中间位置则展开到顶部，否则回到初始位置
            var currentY = AbsoluteLayout.GetLayoutBounds(panel).Y;
            var midPoint = (_maxPanelY + _minPanelY) / 2;
            var targetY = currentY < midPoint ? _maxPanelY : _minPanelY;
            // 平滑过渡动画
            panel.TranslateTo(0, targetY - currentY, 250);
            break;
    }
}

关于Bottom Sheet的替代方案 #

如果想用.NET MAUI Toolkit的BottomSheet组件，需要通过自定义渲染器或设置Margin来调整初始位置（将底部Margin设为NavigationView的高度），但这种方式的拖动范围控制灵活性不如自定义手势逻辑，更适合不需要精准贴合NavigationView的场景。

原代码无效的原因 #

1. 未关联NavigationView的位置，面板初始位置未设置在NavigationView正上方
2. 没有限制拖动范围，导致拖动时面板位置混乱
3. 布局层级关系错误，面板未与主内容区、NavigationView形成正确的叠加层级

内容的提问来源于stack exchange，提问作者Salih Etka Akagündüz