2

我正在使用 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"/>

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

4

2 回答 2

3

我有一个类似的场景 - 我有几个页面只能根据启动逻辑查看，我需要 shell 以正确的顺序加载它们，但在弹出窗口中也不可见。我能够做到这一点只是通过添加应该在层次结构中从弹出窗口中隐藏的页面作为FlyoutItemsIsEnabled="True"和是IsVisible="False"属性。来自xamarin 文档

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

IsVisible，bool 类型，指示 FlyoutItem 是否隐藏在弹出菜单上。它的默认值为真。

  • 当我只设置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通过添加相同的属性从 中删除空格。

于 2021-01-18T20:58:51.357 回答
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 时，你将不会回到主页（显示 aminials 信息）。（例如，我的主页将显示 aminials 信息，当我单击AboutMenuItem 时，我无法访问我的 aminials 页面像下面的GIF），

在此处输入图像描述

所以，我建议你给你的 一个标题和图标FlyoutItem，当你点击其他菜单项时，你可以回到以前的主页。这里是运行 GIF。 在此处输入图像描述

于 2019-10-28T15:37:03.127 回答