MAUI代码导航时同步更新Shell Flyout选中菜单项

问题根源 #

Shell默认将Flyout选中状态与ShellContent的路由上下文绑定，代码导航如果是在同一ShellContent的导航栈内跳转（而非切换ShellContent），Shell不会自动更新Flyout选中项；同时，当Flyout项处于选中状态时，点击操作会被Shell忽略，导致无法触发导航。

具体解决步骤 #

1. 给ShellContent添加标识（Route或x:Name） #

在AppShell.xaml中，为每个页面对应的ShellContent明确设置Route和x:Name，方便后续查找和操作：

<Shell
    ...>
    <ShellContent 
        x:Name="InitialPageContent"
        Title="Initial Page"
        Route="InitialPage"
        ContentTemplate="{DataTemplate views:InitialPage}" />
    <ShellContent 
        x:Name="MyPageContent"
        Title="My Page"
        Route="MyPage"
        ContentTemplate="{DataTemplate views:MyPage}" />
    <ShellContent 
        x:Name="RandomPageContent"
        Title="Random Page"
        Route="RandomPage"
        ContentTemplate="{DataTemplate views:RandomPage}" />
</Shell>

2. 代码导航后同步Flyout选中状态 #

在ViewModel的导航命令中，完成导航后手动设置Shell的CurrentItem为目标页面的ShellContent，强制更新Flyout选中状态：

// 在InitialPageViewModel中
[RelayCommand]
async Task GoToMyPage()
{
    // 执行代码导航
    await Shell.Current.GoToAsync(nameof(MyPage));
    
    // 查找目标ShellContent并设置为当前选中项
    var targetContent = Shell.Current.Items
        .FirstOrDefault(item => item.Route == nameof(MyPage)) as ShellContent;
    if (targetContent != null)
    {
        Shell.Current.CurrentItem = targetContent;
    }
}

3. 处理选中状态下的菜单点击事件 #

默认情况下，选中的Flyout项点击不会触发导航，需要给ShellContent添加点击手势，手动处理导航逻辑：
在AppShell.xaml的InitialPageContent中添加手势识别器：

<ShellContent 
    x:Name="InitialPageContent"
    Title="Initial Page"
    Route="InitialPage"
    ContentTemplate="{DataTemplate views:InitialPage}">
    <ShellContent.GestureRecognizers>
        <TapGestureRecognizer Tapped="InitialPage_Tapped" />
    </ShellContent.GestureRecognizers>
</ShellContent>

在AppShell.xaml.cs中实现点击事件处理：

private async void InitialPage_Tapped(object sender, EventArgs e)
{
    // 强制导航到InitialPage的根页面，可根据需求选择是否重置导航栈
    // 若要保留返回栈，去掉第二个参数（默认false，不重置）
    await Shell.Current.GoToAsync("//InitialPage", true);
    // 确保选中状态同步
    Shell.Current.CurrentItem = InitialPageContent;
}

4. 可选：全局监听导航事件自动同步状态 #

如果不想在每个导航命令中手动写同步代码，可以监听Shell的Navigated事件，全局处理选中状态同步：
在AppShell.xaml.cs的构造函数中添加监听：

public AppShell()
{
    InitializeComponent();
    // 注册路由
    Routing.RegisterRoute(nameof(InitialPage), typeof(InitialPage));
    Routing.RegisterRoute(nameof(MyPage), typeof(MyPage));
    Routing.RegisterRoute(nameof(RandomPage), typeof(RandomPage));
    
    // 监听导航完成事件
    Shell.Current.Navigated += OnShellNavigated;
}

private void OnShellNavigated(object sender, ShellNavigatedEventArgs e)
{
    // 从当前路由中提取页面标识
    var currentRoute = e.Current.Location.OriginalString;
    // 匹配对应的ShellContent
    var targetContent = Shell.Current.Items
        .FirstOrDefault(item => item.Route != null && currentRoute.Contains(item.Route)) as ShellContent;
    
    if (targetContent != null && Shell.Current.CurrentItem != targetContent)
    {
        Shell.Current.CurrentItem = targetContent;
    }
}

效果验证 #

• 从InitialPage通过代码导航到MyPage后，Flyout中"My Page"会自动高亮选中；
• 点击Flyout中的"Initial Page"，会正常导航回InitialPage（无论之前是否处于选中状态）；
• 保留导航栈：若在导航时不使用//前缀或不设置reset参数，返回按钮可正常回到上一页。

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