.NET MAUI中点击Flyout菜单项页面不切换问题排查

核心问题 #

页面不切换、标题无变化的根源是两个ShellContent使用了完全相同的Route值（都是FormulaPage）。.NET MAUI Shell的路由系统要求每个导航目标的Route必须唯一，重复的Route会让Shell无法区分点击的菜单选项，自然不会触发页面切换。

修复步骤 #

1. 给每个ShellContent设置唯一的Route，比如分别命名为ThermodynamicsPage和MolecularPhysicsPage
2. 无需修改AppShell.xaml.cs，只要保证Route唯一，Flyout菜单点击就能正常触发页面切换

修改后的代码示例 #

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="ArnoFormulynas.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ArnoFormulynas"
    Shell.FlyoutBehavior="Flyout"
    Shell.TabBarIsVisible="False">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="热力学"
                      ContentTemplate="{DataTemplate local:FormulaPage}"
                      Route="ThermodynamicsPage">
            
        </ShellContent>

        <ShellContent Title="分子物理学"
                      ContentTemplate="{DataTemplate local:FormulaPage}"
                      Route="MolecularPhysicsPage">

        </ShellContent>

    </FlyoutItem>

</Shell>

额外说明 #

如果后续需要让不同菜单对应的FormulaPage展示不同内容，可以通过以下方式实现：

• 在ShellContent中添加BindingContext绑定不同的视图模型
• 在导航时通过路由参数传递标识，然后在FormulaPage的OnNavigatedTo方法中读取参数并加载对应数据

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