Xamarin.Forms Shell 在汉堡菜单中将 Flyout Menu 与 MenuItem 组合并排序

Posted 2023-03-12

【中文标题】Xamarin.Forms Shell 在汉堡菜单中将 Flyout Menu 与 MenuItem 组合并排序

【英文标题】：Xamarin.Forms Shell combine and order FlyoutItem with MenuItem in hambuger menu

【发布时间】：2019-11-04 11:22:12

【问题描述】：

我目前在 AsMultipleItems 中有一个带有 FlyoutDisplayOptions 属性的 FlyoutItem，它的作用是汉堡菜单包含与选项卡式页面相同的辅助元素作为元素。我的设计中也有一些 MenuItem，目前它不允许我在 FlyoutItem 中放置 MenuItem，这是我目前的设计：

FlyoutItem 1 FlyoutItem 2 FlyoutItem 3 FlyoutItem 4 FlyoutItem 5 菜单项 1 菜单项 2 菜单项 3 菜单项 4 菜单项 5

例如，我希望 MenuItem 1 位于 FlyoutItem 1 下，但我无法以任何方式做到这一点，有谁知道我如何对不在该结构中 FlyoutItem 内的项目进行排序？例如，我想要这样的设计：

FlyoutItem 1 菜单项 1 FlyoutItem 2 菜单项 2 FlyoutItem 3 菜单项 3 FlyoutItem 4 菜单项 4 FlyoutItem 5 菜单项 5

目前我只能将一种结构排序在另一种之上，但我不能将不同的结构相互组合和排序。

这是我的代码：

  <FlyoutItem Route="home" x:Name="flyoutItem"
        FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Route="bottomtab1" Title="FlyoutItem 1"
                  Style="StaticResource TabBackground"
                  Icon="home_icon"
                  ContentTemplate="DataTemplate views:x" />
    <ShellContent Route="bottomtab2" Title="FlyoutItem 2"
                  Style="StaticResource TabBackground"
                  Icon="home_icon"
                  ContentTemplate="DataTemplate DataTemplate views:x" />
    <ShellContent Route="bottomtab3" Title="FlyoutItem 3"
                  Style="StaticResource TabBackground"
                  Icon="home_icon"
                  ContentTemplate="DataTemplate DataTemplate views:x" />
    <ShellContent Route="bottomtab4" Title="FlyoutItem 4"
                  Style="StaticResource TabBackground"
                  Icon="home_icon"
                  ContentTemplate="DataTemplate DataTemplate views:x" />
    <ShellContent Route="bottomtab5" Title="FlyoutItem 5"
                  Style="StaticResource TabBackground"
                  Icon="home_icon"
                  ContentTemplate="DataTemplate DataTemplate views:x" />
</FlyoutItem>

<MenuItem Text="MenuItem 1"
          IconImageSource="home_icon" />

<MenuItem Text="MenuItem 2"
          IconImageSource="home_icon" />

<MenuItem Text="MenuItem 3"
          IconImageSource="home_icon"/>

<MenuItem Text="MenuItem 4"
          IconImageSource="home_icon"/>

<MenuItem Text="MenuItem 5"
          IconImageSource="home_icon"/>

【参考方案1】：

你可以像下面的代码一样多FlyoutItem。

<FlyoutItem Route="home" x:Name="flyoutItem"
        FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Route="bottomtab1" Title="FlyoutItem 1"
                  Style="StaticResource TabBackground"
                  Icon="home_icon"
                  ContentTemplate="DataTemplate views:x" />
</FlyoutItem>

<MenuItem Text="MenuItem 1"
          IconImageSource="home_icon" />

<FlyoutItem Route="home" 
        FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Route="bottomtab2" Title="FlyoutItem 2"
                  Style="StaticResource TabBackground"
                  Icon="home_icon"
                  ContentTemplate="DataTemplate DataTemplate views:x" />
</FlyoutItem>

<MenuItem Text="MenuItem 2"
          IconImageSource="home_icon" />

<FlyoutItem Route="home" 
        FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Route="bottomtab3" Title="FlyoutItem 3"
                  Style="StaticResource TabBackground"
                  Icon="home_icon"
                  ContentTemplate="DataTemplate DataTemplate views:x" />
</FlyoutItem>

<MenuItem Text="MenuItem 3"
          IconImageSource="home_icon"/>

【讨论】：

我也试过了，但是这样做会丢失 tabbedPage，这对我没有帮助，因为我想保留 tabbedPage。

其实，Xamarin 建议我们将FlyoutItem 和MenuItem 设置为你所做的那样。MenuItem 1 放在 FlyoutItem 1 下并不是一个明智的方法。

但是 Xamarin 当前建议的方式假定汉堡菜单必须在其元素中显示与带有选项卡的页面相同的顺序，这是错误的，UX 团队可以告诉您您想要一个带有带有标签和汉堡菜单的页面，但它们不一定共享项目的顺序。以后我会在官方 GitHub 上开一个建议来解决这个问题。

好的，我们重点讲一下。