Xamarin Form Shell：Flyout 和 TabBar - 仅在 TabBar 中隐藏项目？

Posted 2023-03-21

【中文标题】Xamarin Form Shell：Flyout 和 TabBar - 仅在 TabBar 中隐藏项目？

【英文标题】：Xamarin Form Shell: Flyout and TabBar - Hide items in TabBar only?

【发布时间】：2021-10-30 23:04:54

【问题描述】：

我正在尝试在 Xamarin Shell 中创建双导航，其中浮出控件有 5 个项目（Page1、Page2、Page3、Page4、Page5），底部 TabBar 只有 3 个相同的项目（Page1、Page3、Page5 )。

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Page 1"
                      ContentTemplate="DataTemplate local:Page1"/>
        <ShellContent Title="Page 2"
                      ContentTemplate="DataTemplate local:Page2"/>
        <ShellContent Title="Page 3"
                      ContentTemplate="DataTemplate local:Page3"/>
        <ShellContent Title="Page 4"
                      ContentTemplate="DataTemplate local:Page4"/>
        <ShellContent Title="Page 5"
                      ContentTemplate="DataTemplate local:Page5"/>
</FlyoutItem>

我可以做与我想要的相反的操作，我可以通过在 ShellContent 中添加：FlyoutItemIsVisible="False" 来隐藏弹出菜单中的项目，但没有等同于隐藏 TabBar 中的项目而不是弹出菜单。

这在 Shell 中可行吗？

【参考方案1】：

如果你想隐藏标签，你可以使用属性IsVisible来隐藏你的标签。

请参考以下代码：

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Page 1"
                  IsVisible="False"
                  ContentTemplate="DataTemplate local:Page1"/>
    <ShellContent Title="Page 2"
                  ContentTemplate="DataTemplate local:Page2"/>
    <ShellContent Title="Page 3"
                  ContentTemplate="DataTemplate local:Page3"/>
    <ShellContent Title="Page 4"
                  ContentTemplate="DataTemplate local:Page4"/>
    <ShellContent Title="Page 5"
                  ContentTemplate="DataTemplate local:Page5"/>
</FlyoutItem>

更新：

IsVisible="False" 将隐藏选项卡并将其隐藏在弹出菜单中。 如何隐藏选项卡但将菜单项保留在弹出窗口中？ FlyoutItemIsVisible 隐藏弹出菜单项并保留选项卡，我 需要反过来

您可以使用MenuItem 来实现此目的。

请参考以下代码：

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Page 1"
                  IsVisible="False"
                  ContentTemplate="DataTemplate local:Page1"/>
    <ShellContent Title="Page 2"
                  ContentTemplate="DataTemplate local:Page2"/>
    <ShellContent Title="Page 3"
                  ContentTemplate="DataTemplate local:Page3"/>
    <ShellContent Title="Page 4"
                  ContentTemplate="DataTemplate local:Page4"/>
    <!--<ShellContent Title="Page 5"
                  FlyoutItemIsVisible="False"
                  ContentTemplate="DataTemplate local:Page5"/>-->
</FlyoutItem>

<!--<TabBar>
    <ShellContent  Title="Page5"    Route="Page5" ContentTemplate="DataTemplate local:Page5" />
</TabBar>-->

<MenuItem Text="Page5" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemPage5Clicked">
</MenuItem>

<TabBar>
    <ShellContent Route="Page5" ContentTemplate="DataTemplate local:Page5" />
</TabBar>

并在页面AppShell.xaml.cs中添加函数OnMenuItemPage5Clicked

    private async void OnMenuItemPage5Clicked(object sender, EventArgs e)
    
        await Shell.Current.GoToAsync("//Page5");
    

【讨论】：

IsVisible="False" 将隐藏选项卡并将其隐藏在弹出菜单中。如何隐藏选项卡但将菜单项保留在弹出窗口中？ FlyoutItemIsVisible 隐藏弹出菜单项并保留选项卡，我需要相反。

我已经更新了答案，你可以查一下。

感谢您的更新。尽管更新后的代码正确显示了菜单项，但如果我从弹出菜单导航到 Page5，汉堡菜单和选项卡都会消失。是否可以让他们看到？

您希望页面显示在标签页中吗？