Xamarin.FormsShell如何去除汉堡菜单中FlyoutItem元素的space

Question

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

这是我的代码：

    <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

如果您想删除 FlyoutItem 中的项目，但它仍然显示在 MainPage.Like 下面的 GIF 中。

首先删除FlyoutItem的内容。然后只需对所有 ShellContent 使用 TabBar，就像下面的代码一样。

  <TabBar>
    <Tab Title="Browse" Icon="tab_feed.png">
        <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
    </Tab>
    <Tab Title="About" Icon="tab_about.png">
        <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
    </Tab>
  </TabBar>

但是如果你隐藏它，当你点击任何MenuItem时，你不会回到主页（显示动物信息）。（例如，我的主页会显示动物信息，当我点击About MenuItem，我无法像下面的 GIF 那样访问我的动物页面），

所以，我建议你给你的 FlyoutItem 一个标题和图标，当你点击其他 MenuItem 时，你可以回到以前的 homePage.Here 是运行 GIF。

Answer 2

我有一个类似的场景 - 我有几个页面只应根据启动逻辑查看，我需要 shell 以正确的顺序加载它们，但在弹出窗口中也不可见.我能够做到这一点，只需添加应按层次顺序从弹出窗口中隐藏的页面，如 FlyoutItems 和 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 the flyout menu. Its default value is true.

当我只将 IsVisible 设置为 false 时，我很确定我仍然能够在弹出项目所在的位置单击它，即使它并不明显。这就是为什么我也将 IsEnabled 设置为 false 的原因。可能只有 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>

结果是在Flyout中只有Configuration页面可以点击，没有间距，也没有不可见的地方可以让用户不小心点击导致shell导航（如果您有一个可点击的“space”，它是一个不可见的 shell 弹出项目，情况就是如此。

您应该可以通过添加相同的属性从 <FlyoutItem Route="home"... FlyoutItem 中删除白色space。

Xamarin.FormsShell如何去除汉堡菜单中FlyoutItem元素的space

Xamarin.Forms Shell how to remove the space of the FlyoutItem element in the hamburger menu

xaml

xamarin.forms

xamarin.forms.shell