代码设置FlyoutPage.Detail后导航栏不显示的问题排查

问题根源 #

你在代码后台直接将Detail赋值为BudgetViewPage实例时，没有用NavigationPage进行包裹——而XAML中配置无参页面时，大概率默认是把Detail放在NavigationPage容器里的，NavigationPage才会自动渲染顶部导航栏并关联Flyout的汉堡按钮。

具体解决办法 #

1. 用NavigationPage包裹Detail页面（最直接的修复）

修改FlyoutMenuRoot的构造函数，将BudgetViewPage包装进NavigationPage：

public FlyoutMenuRoot(DataService dataService)
{
    InitializeComponent();
    // 核心：用NavigationPage包裹Detail页面
    Detail = new NavigationPage(new BudgetViewPage(dataService));
    // 显式确保汉堡按钮可见（默认值为true，可根据需要调整）
    IsPresentedButtonVisible = true;
}

2. 依赖注入解析页面（MAUI最佳实践）

避免手动new页面实例，让DI容器自动处理构造参数：

• 先在Program.cs中注册页面：

builder.Services.AddTransient<BudgetViewPage>();
builder.Services.AddTransient<FlyoutMenuRoot>();

• 然后在FlyoutMenuRoot构造函数中直接注入BudgetViewPage：

public FlyoutMenuRoot(BudgetViewPage budgetViewPage)
{
    InitializeComponent();
    Detail = new NavigationPage(budgetViewPage);
    IsPresentedButtonVisible = true;
}

额外检查项

• 确认BudgetViewPage的XAML或后台代码中没有设置NavigationPage.HasNavigationBar="False"，这个属性会强制隐藏导航栏；
• 清理XAML中原本的Detail配置，避免代码赋值被覆盖。

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