Xamarin.Forms使用Prism时如何同时实现MasterDetailPage与底部类Shell标签页

完全有成熟的原生实现方案，不需要引入Shell，完全兼容Prism现有导航体系，可完美复现Gmail类应用的侧边抽屉+底部标签交互逻辑，具体实现如下：

核心实现逻辑 #

该交互的本质是嵌套页面结构：将FlyoutPage作为根页面，其Detail属性承载设置了底部摆放的TabbedPage作为标签容器，这是Xamarin.Forms原生支持的结构，无需依赖第三方控件。

具体实现步骤 #

• 页面注册
  在Prism的App.xaml.cs的RegisterTypes方法中完成所有相关页面的导航注册，包括侧边抽屉页、标签容器页、各标签对应内容页、侧边栏跳转目标页：

  containerRegistry.RegisterForNavigation<AppFlyoutPage>();
  containerRegistry.RegisterForNavigation<MainTabbedPage>();
  containerRegistry.RegisterForNavigation<HomePage, HomeViewModel>();
  containerRegistry.RegisterForNavigation<NotifyPage, NotifyViewModel>();
  containerRegistry.RegisterForNavigation<ProfilePage, ProfileViewModel>();
  

• 根导航初始化
  应用启动时调用Prism导航方法直接加载根结构：

  NavigationService.NavigateAsync("AppFlyoutPage/NavigationPage/MainTabbedPage");
  

• 配置底部标签栏
  在MainTabbedPage的XAML中设置ToolbarPlacement="Bottom"启用底部标签样式，同时可自定义标签栏的外观、每个标签的标题和图标：

  <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:YourApp.Views"
             x:Class="YourApp.Views.MainTabbedPage"
             ToolbarPlacement="Bottom"
             BarBackgroundColor="#FFF"
             BarTextColor="#1976D2">
    <views:HomePage Title="首页" IconImageSource="ic_home.png"/>
    <views:NotifyPage Title="通知" IconImageSource="ic_notify.png"/>
    <views:ProfilePage Title="我的" IconImageSource="ic_profile.png"/>
  </TabbedPage>
  

• 侧边栏导航适配
  点击侧边栏菜单项时，若要替换整个内容区隐藏底部标签，直接导航到目标页面即可：

  NavigationService.NavigateAsync("NavigationPage/TargetPage", useModalNavigation: false);
  

  若要在当前标签的导航栈内推送新页面，在对应标签的ViewModel中调用普通Prism导航方法即可，不会影响侧边抽屉和底部标签的结构。

可选优化 #

• 安卓端可通过TabbedPage.BadgeCount和TabbedPage.BadgeColor属性直接实现标签的未读红点效果，无需额外开发
• 如需动态生成标签，可将TabbedPage的Children绑定到ViewModel的集合，配合Prism区域管理器实现动态加载
• 要实现侧边栏打开时底部标签栏保持可见的效果，只需保证所有导航操作都作用于FlyoutPage的Detail层级即可

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