Xamarin 表单 Shell：弹出窗口 v/s TabBar

Question

我感到困惑

TabBar disables the Flyout

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

Answer 1

这意味着如果您只使用 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>

在此示例中，第 1 页和第 2 页将显示为 底部选项卡 并且显示为 弹出项目 。

如果出于某些原因您只想将页面显示为底部选项卡（将其隐藏在弹出窗口中），那么您可以在其上设置 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 作为根元素。

Xamarin 表单 Shell：弹出窗口 v/s TabBar

Xamarin Form Shell: Flyout v/s TabBar

xaml

tabs

flyout

xamarin.forms

xamarin.forms.shell

结论