.NET Maui底部抽屉加载即显示问题及实现方案咨询

我尝试用.NET Maui重现Xamarin Forms中的底部抽屉示例，代码如下，但现在底部抽屉在页面加载时就始终显示，而非调用时才显示。想知道.NET Maui处理Frame视图是否有特殊机制，以及如何实现和Xamarin Forms示例相同的效果。

实现代码 #

<Grid>
    <!-- Backdrop -->
    <BoxView Color="#4B000000"
             Opacity="0"
             InputTransparent="True"
             x:Name="Backdrop">
        <BoxView.GestureRecognizers>
            <TapGestureRecognizer
                Tapped="TapGestureRecognizer_Tapped"/>
        </BoxView.GestureRecognizers>
    </BoxView>

    <!-- Bottom Drawer -->
    <Frame
        x:Name="BottomToolbar"
        HeightRequest="200"
        VerticalOptions="End"
        BackgroundColor="#FFFFFF"
        CornerRadius="20"
        TranslationY="260"
        Padding="15,6">
        <Frame.GestureRecognizers>
            <PanGestureRecognizer
                PanUpdated="PanGestureRecognizer_PanUpdated"
        />
        </Frame.GestureRecognizers>
        <StackLayout Orientation="Vertical" Padding="0,4">
            <BoxView CornerRadius="2" HeightRequest="4" WidthRequest="40"
                     BackgroundColor="LightGray"
                     HorizontalOptions="Center"/>
            <Label Text="Actions"
                   HorizontalOptions="Center"
                   FontSize="18"
                   FontAttributes="Bold"/>
            <TableView Intent="Settings"
               VerticalOptions="End"
               BackgroundColor="White"
               >
                <TableSection>
                    <TextCell
                        Text="Favorite"/>
                    <TextCell
                        Text="Share"/>
                </TableSection>
            </TableView>
        </StackLayout>

    </Frame>
</Grid>

问题分析与解决方案 #

.NET Maui对Frame的处理没有特殊机制，问题出在初始TranslationY值的硬编码上。你设置的TranslationY="260"无法保证在所有设备上都能让抽屉完全移出可视区域，不同设备的屏幕高度、布局边界存在差异，硬数值会导致适配问题。

具体修复步骤： #

1. 移除硬编码的TranslationY，改为在页面加载完成后动态设置初始隐藏位置：
   在页面的OnAppearing方法中添加逻辑：

   protected override void OnAppearing()
   {
       base.OnAppearing();
       // 让抽屉完全向下移出屏幕
       BottomToolbar.TranslationY = BottomToolbar.Height;
   }
   

2. 添加抽屉显示方法，通过按钮点击等触发：

   private void ShowBottomDrawer()
   {
       // 显示遮罩
       Backdrop.FadeTo(1, 250);
       Backdrop.InputTransparent = false;
       // 滑动显示抽屉
       BottomToolbar.TranslateTo(0, 250, Easing.CubicInOut);
   }
   

3. 完善关闭逻辑，支持点击遮罩或滑动关闭：

   private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
   {
       HideBottomDrawer();
   }
   
   private void HideBottomDrawer()
   {
       // 隐藏遮罩
       Backdrop.FadeTo(0, 250);
       Backdrop.InputTransparent = true;
       // 滑动收起抽屉
       BottomToolbar.TranslateTo(BottomToolbar.Height, 250, Easing.CubicInOut);
   }
   

4. 优化Pan手势处理，确保滑动边界合理：

   private double _startPanY;
   private void PanGestureRecognizer_PanUpdated(object sender, PanUpdatedEventArgs e)
   {
       switch (e.StatusType)
       {
           case GestureStatus.Started:
               _startPanY = BottomToolbar.TranslationY;
               break;
           case GestureStatus.Running:
               var newTranslationY = _startPanY + e.TotalY;
               // 限制抽屉只能在0到自身高度之间滑动
               BottomToolbar.TranslationY = Math.Clamp(newTranslationY, 0, BottomToolbar.Height);
               // 同步调整遮罩透明度
               Backdrop.Opacity = 1 - (BottomToolbar.TranslationY / BottomToolbar.Height);
               break;
           case GestureStatus.Completed:
               // 根据滑动距离判断收起或展开
               if (e.TotalY > 50)
               {
                   HideBottomDrawer();
               }
               else if (e.TotalY < -50)
               {
                   ShowBottomDrawer();
               }
               break;
       }
   }
   

5. 确保布局容器占满屏幕：
   页面的根Grid要设置VerticalOptions="FillAndExpand"，保证布局边界计算准确，避免抽屉位置偏移。

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