.NET MAUI Shell Flyout 子项实现方案咨询

方法一：使用FlyoutItem嵌套层级子项 #

直接在FlyoutItem下添加ShellContent或嵌套FlyoutItem，实现多级菜单结构，示例代码如下：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourAppNamespace"
       x:Class="YourAppNamespace.AppShell">

    <!-- 带二级子项的顶级Flyout菜单 -->
    <FlyoutItem Title="主功能" Icon="main_icon.png">
        <ShellContent Title="首页" ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="数据统计" ContentTemplate="{DataTemplate local:StatsPage}" />
        <!-- 二级子菜单 -->
        <FlyoutItem Title="管理中心">
            <ShellContent Title="用户管理" ContentTemplate="{DataTemplate local:UserManagePage}" />
            <ShellContent Title="权限设置" ContentTemplate="{DataTemplate local:PermissionPage}" />
        </FlyoutItem>
    </FlyoutItem>

    <!-- 独立顶级菜单 -->
    <FlyoutItem Title="系统设置" Icon="settings_icon.png">
        <ShellContent Title="个人配置" ContentTemplate="{DataTemplate local:SettingsPage}" />
    </FlyoutItem>

</Shell>

方法二：用MenuItem实现功能型子项 #

如果子项不需要跳转页面，而是触发操作逻辑，可在FlyoutItem下添加MenuItem：

<FlyoutItem Title="工具菜单" Icon="tools_icon.png">
    <ShellContent Title="快捷入口" ContentTemplate="{DataTemplate local:QuickEntryPage}" />
    <MenuItem Text="清除本地缓存" Command="{Binding ClearCacheCommand}" />
    <MenuItem Text="检查更新" Command="{Binding CheckUpdateCommand}" />
</FlyoutItem>

自定义样式优化层级显示 #

为了区分父子菜单的视觉层级，可通过自定义样式调整缩进、字号：

<Shell.Resources>
    <Style TargetType="FlyoutItem">
        <Setter Property="Padding" Value="12,6" />
        <Setter Property="FontSize" Value="16" />
    </Style>
    <Style TargetType="FlyoutItem" x:Key="SubMenuItemStyle">
        <Setter Property="Padding" Value="32,6" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="TextColor" Value="#666666" />
    </Style>
</Shell.Resources>

给二级FlyoutItem应用样式：

<FlyoutItem Title="管理中心" Style="{StaticResource SubMenuItemStyle}">
    <!-- 子项内容 -->
</FlyoutItem>

注意事项 #

• 确保ShellContent绑定的页面已在项目中正确定义
• 图标资源需放置在MAUI对应的共享资源目录或平台专属资源目录
• 若需动态生成子项，可在后台代码中通过Shell.FlyoutItems集合添加元素

内容的提问来源于stack exchange，提问作者Hoàng Trần