Xamarin Form Shell：Flyout 与 TabBar

Question

读了这句话我很困惑

TabBar 禁用 Flyout

在 Xamarin 文档中。但即使是示例代码也以 Flyout 布局显示 TabBar。我想，我误解了 Flyout 和 TabBar （我的想法如附件所示）。任何人都可以想象其中的差异。Google 搜索并没有给出太多关于 TabBar 的信息，它只是显示了标准文档。

Answer 1

这意味着如果您仅用作TabbarShell 的根元素，您将失去Flyout，但如果您的根元素是 aFlyoutItem那么您可能会从两者中受益，如您所显示的图片所示。

从另一面来看，您不能显式地嵌套a或相反FlyoutItem的内部。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作为根元素。