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

Question

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

这是我的代码：

    <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 以正确的顺序加载它们，但在弹出窗口中也不可见。我能够做到这一点只需将应该从弹出窗口中隐藏的页面添加为FlyoutItems 和IsEnabled="True" 和IsVisible="False" 属性。来自xamarin docs

IsEnabled，布尔类型，定义项目是否在 chrome 中可选。

IsVisible，bool 类型，指示 FlyoutItem 是否隐藏在 弹出菜单。它的默认值为 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 导航（如果你有一个可点击的“空间”，它是一个不可见的外壳弹出项）。

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

Answer 2

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

首先删除FlyoutItem的内容。然后只需将TabBar 用于所有ShellContent，如下面的代码。

  <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一个标题和图标，当你点击其他MenuItems时，你可以回到之前的主页。这里是运行GIF。