如何将MAUI Shell的Cats和Dogs ShellContent迁移至Domestic页面并保留顶部双Tab布局

问题原因 #

你将DomesticPage定义为Shell类型，当把一个Shell嵌套到另一个Shell的Tab中时，内部Shell的ShellContent会被识别为Flyout折叠菜单的选项，而非父Tab下的顶部子标签页。要保留原有的顶部双Tab布局，需利用Shell的嵌套Tab特性来抽离代码。

实现步骤 #

1. 创建独立的Domestic子Tab组件
   创建DomesticTabs.xaml，将原Domestic Tab下的两个ShellContent包裹在Tab中（而非Shell）：

<Tab xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:views="clr-namespace:Xaminals.Views"
     x:Class="Xaminals.Views.DomesticTabs">
    <ShellContent Title="Cats" ContentTemplate="{DataTemplate views:CatsPage}" />
    <ShellContent Title="Dogs" ContentTemplate="{DataTemplate views:DogsPage}" />
</Tab>

2. 修改AppShell引用该组件
   在AppShell的Domestic Tab中直接引用DomesticTabs，替代原来的ShellContent：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab Title="Domestic" Icon="paw.png">
            <views:DomesticTabs />
        </Tab>
        <Tab Title="Monkeys" Icon="monkey.png">
            <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
        </Tab>
    </TabBar>
</Shell>

最佳实践说明 #

• 这种方式完全遵循Shell的导航体系，保留了原有的顶部Tab布局和Shell的路由、导航特性。
• 抽离后的DomesticTabs专注于管理Domestic分类下的子页面，符合单一职责原则，代码结构更清晰。
• 避免了嵌套Shell的问题，不会触发Flyout菜单的异常显示。

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