xaml - Xamarin.Forms Shell 如何删除汉堡菜单中 FlyoutItem 元素的空间

Question

我正在使用 Shell，并且我有一个设计，其中有一个 FlyoutItem，其 AsSingleItem 中具有 FlyoutDisplayOptions 属性，我还有几个 MenuItem，此设计有一个带有选项卡的页面和一个显示 MenuItem 的汉堡菜单，但问题是如果我放置整个 FlyoutItem 项目的标题和图标，它是空的，但如果我将其留空，该空间不会消失并且是空的，这是一个浪费的空间，我的问题是如何删除该空间？ p>

这是我的代码:

    <FlyoutItem Route="home" x:Name="flyoutItem"
        FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Route="bottomtab1"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate views:x}" />
    <ShellContent Route="bottomtab2"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate DataTemplate views:x}" />
    <ShellContent Route="bottomtab3"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate DataTemplate views:x}" />
    <ShellContent Route="bottomtab4"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate DataTemplate views:x}" />
    <ShellContent Route="bottomtab5"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate DataTemplate views:x}" />
</FlyoutItem>

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

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

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

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

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

<MenuItem Text="Test 6"
          IconImageSource="home_icon"/>

我在这些图像中留下了设计

Answer 1

我有一个类似的场景 - 我有几个页面只能根据启动逻辑进行查看，我需要 shell 以正确的顺序加载它们，但在弹出窗口中也不可见。我只需按层次结构顺序添加应从弹出窗口中隐藏的页面即可做到这一点，如 FlyoutItem与IsEnabled="True"是 IsVisible="False"属性。来自 xamarin docs

IsEnabled, of type boolean, defines if the item is selectable in the chrome.

IsVisible, of type bool, indicates if the FlyoutItem is hidden on theflyout menu. Its default value is true.

• 当我只设置IsVisible时为 false 时，我非常确定我仍然能够单击弹出项目，即使它不明显存在。这就是为什么我还设置了 IsEnabled为假。可能只是这种情况IsVisible=False是必需的。

当应用程序运行MainPage=new AppShell()时它将加载 CheckConnection第一个页面(现在从弹出窗口中隐藏)具有导航到正确页面的逻辑(请记住，正如@Leon Lu - MSFT 在他的回答中所说，以确保您仍然可以正确地导航到“隐藏”页面和从“隐藏”页面导航)。

<FlyoutItem 
        IsEnabled="True"
        IsVisible="False"
        Title="CheckConnectionPage"
        >
    <ShellContent Route="CheckConnectionPage" ContentTemplate="{DataTemplate local:CheckConnectionPage}"  />
    
</FlyoutItem>
<FlyoutItem 
        IsEnabled="True"
        IsVisible="False"
        Title="StatPage"
        >
    <ShellContent Route="StatPage" ContentTemplate="{DataTemplate local:StatPage}"  />
</FlyoutItem>

<FlyoutItem Title="Configuration" Icon="settings_icon_black.png">
    <ShellContent Route="ConfigurePage"  ContentTemplate="{DataTemplate local:ConfigurePage}" />
</FlyoutItem>

结果是，只有“配置”页面可以在弹出窗口中点击，并且没有间距，并且不存在用户可能意外单击以导致 shell 导航的不可见位置(如果您这样做，就会出现这种情况)有一个可点击的“空间”，它是一个不可见的外壳弹出项目)。

您应该能够删除 <FlyoutItem Route="home"... 中的空格FlyoutItem通过添加相同的属性。