Xamarin Forms Shell：Flyout vs TabBar

Question

我对@9​​87654321@感到困惑

TabBar 禁用 Flyout

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

Answer 1

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

另一方面，您不能在 Tabbar 内显式嵌套 FlyoutItem 或相反。

使用 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>

结论

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

• 如果您不想要弹出窗口，请使用 Tabbar 作为根元素。