Xamarin.Forms横屏模式隐藏工具栏且保留MasterDetailPage交互

我之前做过类似的需求，谷歌日历的那种效果确实很实用——横屏时节省空间隐藏导航栏，但侧边栏的交互完全不受影响。下面给你分享具体的实现步骤，针对.NET MAUI（也兼容Xamarin.Forms）：

核心思路 #

我们需要监听屏幕方向的变化，根据横/竖屏状态动态控制导航栏的可见性，同时确保MasterDetailPage的侧边栏触发机制（滑动手势、自定义汉堡按钮）依然能正常工作。

步骤1：监听屏幕方向变化并控制导航栏 #

在你的Detail页面代码中，订阅屏幕方向变更事件，实时调整导航栏状态：

public partial class YourDetailPage : ContentPage
{
    public YourDetailPage()
    {
        InitializeComponent();
        // 订阅方向变化事件
        DeviceDisplay.MainDisplayInfoChanged += OnDisplayOrientationChanged;
        // 初始化时检查当前方向
        UpdateNavBarVisibility(DeviceDisplay.MainDisplayInfo.Orientation);
    }

    private void OnDisplayOrientationChanged(object sender, DisplayInfoChangedEventArgs e)
    {
        UpdateNavBarVisibility(e.DisplayInfo.Orientation);
    }

    private void UpdateNavBarVisibility(DisplayOrientation orientation)
    {
        bool isLandscape = orientation is DisplayOrientation.Landscape or DisplayOrientation.LandscapeFlipped;
        
        // 找到上层的NavigationPage，切换导航栏可见性
        if (Parent is NavigationPage navPage)
        {
            navPage.BarVisibility = isLandscape ? BarVisibility.Never : BarVisibility.Default;
        }
        // 如果你是直接在页面上控制导航栏，也可以用下面这句
        // NavigationBarIsVisible = !isLandscape;
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        // 取消订阅避免内存泄漏
        DeviceDisplay.MainDisplayInfoChanged -= OnDisplayOrientationChanged;
    }
}

步骤2：确保侧边栏交互正常 #

默认情况下，MasterDetailPage在iOS和Android都支持左侧滑动手势打开侧边栏，即使导航栏隐藏，这个手势依然生效，所以大部分场景下你不需要额外处理。但如果需要添加自定义的汉堡按钮（比如横屏时显示悬浮按钮），可以这么做：

先在DetailPage的XAML中添加悬浮按钮：

<AbsoluteLayout>
    <!-- 页面主内容 -->
    <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" 
                 AbsoluteLayout.LayoutFlags="All">
        <!-- 你的页面控件 -->
    </StackLayout>

    <!-- 自定义汉堡按钮，横屏时显示 -->
    <Button x:Name="HamburgerBtn"
            ImageSource="hamburger_icon"
            WidthRequest="40" HeightRequest="40"
            CornerRadius="20"
            AbsoluteLayout.LayoutBounds="15,15,AutoSize,AutoSize"
            Clicked="HamburgerBtn_Clicked"
            IsVisible="False"/>
</AbsoluteLayout>

然后在代码中控制按钮的可见性，并处理点击事件：

private void UpdateNavBarVisibility(DisplayOrientation orientation)
{
    bool isLandscape = orientation is DisplayOrientation.Landscape or DisplayOrientation.LandscapeFlipped;
    
    // 切换导航栏
    if (Parent is NavigationPage navPage)
    {
        navPage.BarVisibility = isLandscape ? BarVisibility.Never : BarVisibility.Default;
    }
    // 横屏时显示自定义汉堡按钮
    HamburgerBtn.IsVisible = isLandscape;
}

private void HamburgerBtn_Clicked(object sender, EventArgs e)
{
    // 找到根页面的MasterDetailPage，切换侧边栏状态
    if (Application.Current.MainPage is MasterDetailPage masterDetail)
    {
        masterDetail.IsPresented = !masterDetail.IsPresented;
    }
}

平台兼容性注意事项 #

• Android：如果遇到系统导航栏干扰的问题，可以在Platforms/Android/MainActivity.cs中调整窗口设置，比如允许布局延伸到状态栏下方，但要确保交互区域不被遮挡。
• iOS：默认的滑动手势会正常工作，不需要额外配置。
• 内存泄漏：一定要在页面消失时取消订阅方向变化事件，避免内存占用问题。

这样实现后，就能达到和谷歌日历类似的效果：竖屏时显示完整导航栏，横屏时隐藏导航栏，同时可以通过滑动或自定义按钮打开侧边栏。

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