Android端MAUI中FlyoutPage嵌套NavigationPage异常问题

问题核心原因 #

MAUI 中 FlyoutPage 的导航逻辑与 Xamarin 存在差异：

• 禁止将 FlyoutPage 嵌套进 NavigationPage 作为根页面，Android 平台会因此出现菜单图标丢失、返回后页面空白的冲突问题
• 直接将 FlyoutPage 设为根页面时，FlyoutPage.Navigation 并不指向其 Detail 中的 NavigationPage，直接调用 PushAsync 会无效

具体修复步骤 #

1. 修正 App 根页面设置

直接将 AppFlyout 设为应用根页面，无需嵌套 NavigationPage：

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new AppFlyout();
    }
}

2. 修改 FlyoutPage 导航逻辑

在 AppFlyout 的菜单选择事件中，获取 Detail 容器内的 NavigationPage 进行导航操作，而非使用 FlyoutPage 自身的 Navigation 属性：

public partial class AppFlyout : FlyoutPage
{
    public AppFlyout()
    {
        InitializeComponent();
        flyoutPage.listView.ItemSelected += OnItemSelected;
    }

    async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItemIndex >= 0)
        {
            switch (e.SelectedItemIndex)
            {
                case 0:
                    // 定位到Detail中的NavigationPage执行导航
                    if (Detail is NavigationPage navPage)
                    {
                        await navPage.PushAsync(new Page2());
                    }
                    break;
            }

            flyoutPage.listView.SelectedItem = null;
            IsPresented = false;
        }
    }
}

3. 清理 FlyoutPage 无效属性

移除 AppFlyout.xaml 中针对 NavigationPage 的无效属性（这些属性仅对 NavigationPage 内的页面生效）：

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TestApp"
            x:Class="TestApp.AppFlyout"
            FlyoutLayoutBehavior="Popover">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:MainPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

效果验证 #

修改完成后：

• Android 平台的菜单图标会正常显示
• 点击菜单导航到 Page2 后，返回按钮可正确回到 MainPage，无空白问题
• PushAsync 逻辑在 Android 和 iOS 端均可正常工作

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