时间戳

首页 > 解决方案 > Xamarin Form Shell：Flyout v/s TabBar

xaml - Xamarin Form Shell：Flyout v/s TabBar

问题描述

读到句子我很困惑

TabBar 禁用 Flyout

在 Xamarin 文档中。但即使是示例代码也在 Flyout 布局中显示 TabBar。我想，我误解了 Flyout 和 TabBar（我的想法是按照附件）。任何人都可以想象其中的区别。Google 搜索并没有在 TabBar 上提供太多信息，它只是显示标准文档。

在此处输入图像描述

标签： xamlxamarin.formstabsflyoutxamarin.forms.shell

解决方案

这意味着如果您仅将其用作 Shell 的根Tabbar元素，您将失去.FlyoutFlyoutItem

从另一方面来看，您不能明确地将 a 嵌套在 aFlyoutItem内部Tabbar或相反的内部。

使用 a 时，您仍然可以定义 ( Tabbar) 底部选项卡，但不能明确定义：

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="First"
                      ContentTemplate="{DataTemplate local:Page1}"/>

        <ShellContent Title="Seconde"
                      ContentTemplate="{DataTemplate local:Page2}"/>
    </FlyoutItem>

在此示例中，Page1 和 Page2 将显示为底部选项卡和弹出项。

如果由于某些原因您只想将页面显示为底部选项卡（将其隐藏在弹出窗口中），那么您可以FlyoutItemIsVisible="False"对其进行设置ShellContent：

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="First"
                      ContentTemplate="{DataTemplate local:Page1}"/>

        <ShellContent Title="Seconde" FlyoutItemIsVisible="False"
                      ContentTemplate="{DataTemplate local:Page2}"/>
    </FlyoutItem>

编辑

在没有显式 Tabbar 元素的情况下生成浮出控件的底部和顶部选项卡示例

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="1st Bottom Tab">
        <ShellContent Title="1st Top tab"
                      ContentTemplate="{DataTemplate local:Page1}"/>

        <ShellContent Title="Seconde" FlyoutItemIsVisible="False"
                      ContentTemplate="{DataTemplate local:Page2}"/>
</Tab>

<Tab Title="2nd Bottom Tab">
        <ShellContent Title="First"
                      ContentTemplate="{DataTemplate local:Page1}"/>

        <ShellContent Title="Seconde" FlyoutItemIsVisible="False"
                      ContentTemplate="{DataTemplate local:Page2}"/>
</Tab>
    </FlyoutItem>

结论

  • 如果你想要一个浮出控件（无论它是除了顶部或底部或两者的选项卡之外），请使用 aFlyoutItem作为根元素（不需要 Tabbar）。

  • 如果您不想将弹出窗口Tabbar作为根元素。

推荐阅读