Xamarin Forms Shell：Flyout 与 TabBar

读完后我很困惑sentence

TabBar 禁用 Flyout

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

这意味着如果您仅使用Tabbar作为 Shell 的根元素，您将失去Flyout，但是如果你的根元素是FlyoutItem那么您可能会受益于两者，如您所显示的图片所示。

从另一方面来说，你不能显式地嵌套一个FlyoutItem里面的一个Tabbar或相反。

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

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

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

在此示例中，Page1 和 Page2 将显示为底部标签 AND as 弹出项目.

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

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

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

EDIT

在没有显式 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>

结论

• 如果您想要一个弹出窗口（无论它是除了顶部还是底部或两者之外的选项卡），请使用FlyoutItem作为根元素（不需要 Tabbar）。

• 如果你不想弹出来Tabbar作为根元素。