You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET MAUI Tab嵌套问题:如何在Conference页添加Eastern/Western子Tab

MAUI Shell嵌套标签页实现方案

问题原因

你当前的写法错误在于把<Tab>嵌套在了<ShellContent>内部,MAUI Shell的结构规则里,<ShellContent>是叶子节点,不能包含子Tab控件,所以你的子Tab完全不会被渲染。

正确实现方式

要实现Conference页面下的Eastern/Western子标签,需要调整Shell的层级结构:将原来的Conference对应的<ShellContent>替换为一个<Tab>,让它和Overall、Division同级,然后在这个Tab内部添加Eastern和Western的<ShellContent>。

修改后的完整代码

<FlyoutItem Route="standings" FlyoutDisplayOptions="AsMultipleItems">
    <Tab Title="Standings" Route="standings" Icon="standings.png">
        <!-- 顶级标签:Overall -->
        <ShellContent Route="overallstandings"
                      Style="{StaticResource StandingsShell}"
                      Title="Overall"
                      Icon="overall.png"
                      ContentTemplate="{DataTemplate views:OverallStandingsPage}" />
        
        <!-- 顶级标签:Conference(包含子标签) -->
        <Tab Route="conferencestandings"
             Style="{StaticResource StandingsShell}"
             Title="Conference"
             Icon="conference.png">
            <!-- 子标签:Eastern -->
            <ShellContent Route="easternconferencestandings"
                          Style="{StaticResource StandingsShell}"
                          Title="Eastern"
                          Icon="eastern.png"
                          ContentTemplate="{DataTemplate views:EasternConferenceStandingsPage}" />
            <!-- 子标签:Western -->
            <ShellContent Route="westernconferencestandings"
                          Style="{StaticResource StandingsShell}"
                          Title="Western"
                          Icon="western.png"
                          ContentTemplate="{DataTemplate views:WesternConferenceStandingsPage}" />
        </Tab>
        
        <!-- 顶级标签:Division -->
        <ShellContent Route="divisionstandings"
                      Style="{StaticResource StandingsShell}"
                      Title="Division"
                      Icon="division.png"
                      ContentTemplate="{DataTemplate views:DivisionStandingsPage}" />
    </Tab>
</FlyoutItem>

关键注意点

  • 所有Route属性值必须唯一,避免导航时出现冲突
  • 切换到Conference标签后,底部/顶部会自动显示Eastern和Western子标签
  • 移除了原来Conference ShellContent中重复绑定的EasternConferenceStandingsPage,避免冗余

内容的提问来源于stack exchange,提问作者Jason M

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 12:15:43