MAUI iOS应用Flyout菜单跳转至More页面问题求助

我开发的MAUI应用中，Android端侧滑菜单运行正常，但iOS端从第5个菜单「Pickup/Dropoff」到最后一个「Settings」，点击任意菜单都会跳转到「More」页面，该页面列出了这些菜单。相关代码如下：

var flyoutItem = new FlyoutItem()
{
    Title = "Dashboard",
    Route = nameof(ParentDashboard),
    FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
    Items =
    {
        new ShellContent
        {
            Title = "Dashboard",
            FlyoutIcon = "home",
            ContentTemplate = new DataTemplate(typeof(ParentDashboard)),
        },
        new ShellContent
        {
            Title = "Teachers",
            FlyoutIcon = "parents",
            ContentTemplate = new DataTemplate(typeof(Teachers))
        },
        new ShellContent
        {
            Title = "Messages",
            FlyoutIcon = "chat",
            ContentTemplate = new DataTemplate(typeof(RecentMessagesPage)),
        },
        new ShellContent
        {
            Title = "Events & Notices",
            FlyoutIcon = "events",
            ContentTemplate = new DataTemplate(typeof(Events))
        },
        new ShellContent
        {
            Title = "Pickup/Dropoff",
            FlyoutIcon = "car",
            ContentTemplate = new DataTemplate(typeof(PickupDropoffRequestsPage)),
        },
        new ShellContent
        {
            Title = "Attendance",
            FlyoutIcon = "homework",
            ContentTemplate = new DataTemplate(typeof(ParentStudentAttendancePage))
        },
        new ShellContent
        {
            Title = "Homework",
            FlyoutIcon = "homework",
            ContentTemplate = new DataTemplate(typeof(StudentHomeworks))
        },
        new ShellContent
        {
            Title = "Notifications",
            FlyoutIcon = "notifications",
            ContentTemplate = new DataTemplate(typeof(NotificationsPage))
        },
        new ShellContent
        {
            Title = "My School",
            FlyoutIcon = "school",
            ContentTemplate = new DataTemplate(typeof(SchoolProfile))
        },
        new ShellContent
        {
            Title = "Settings",
            FlyoutIcon = "settings",
            ContentTemplate = new DataTemplate(typeof(SettingsPage))
        },
    }
};

问题原因 #

iOS平台的Shell组件对单个FlyoutItem内的ShellContent数量有默认限制（最多4个），当数量超过4个时，会自动将多余的项折叠到「More」菜单中。Android平台没有这个限制，因此两端表现不一致。

解决方案 #

最直接的解决方式是将原本放在同一个FlyoutItem下的ShellContent拆分到多个独立的FlyoutItem中，避免单个FlyoutItem下的项数超过4个。修改后的代码示例如下：

// 为每个页面创建独立的FlyoutItem
Shell.Items.Add(new FlyoutItem
{
    Title = "Dashboard",
    FlyoutIcon = "home",
    Route = nameof(ParentDashboard),
    Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(ParentDashboard)) } }
});

Shell.Items.Add(new FlyoutItem
{
    Title = "Teachers",
    FlyoutIcon = "parents",
    Route = nameof(Teachers),
    Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(Teachers)) } }
});

Shell.Items.Add(new FlyoutItem
{
    Title = "Messages",
    FlyoutIcon = "chat",
    Route = nameof(RecentMessagesPage),
    Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(RecentMessagesPage)) } }
});

Shell.Items.Add(new FlyoutItem
{
    Title = "Events & Notices",
    FlyoutIcon = "events",
    Route = nameof(Events),
    Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(Events)) } }
});

Shell.Items.Add(new FlyoutItem
{
    Title = "Pickup/Dropoff",
    FlyoutIcon = "car",
    Route = nameof(PickupDropoffRequestsPage),
    Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(PickupDropoffRequestsPage)) } }
});

// 依次添加剩余页面的FlyoutItem...

这样修改后，iOS端的每个菜单都会作为独立项显示在侧滑菜单中，点击时直接跳转到对应页面，不会再被折叠到「More」菜单里。

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