Xamarin Form Shell：Flyout v/s TabBar 结论

如何解决Xamarin Form Shell：Flyout v/s TabBar 结论

我对阅读 sentence

感到困惑

TabBar 禁用浮出控件

在 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 将显示为底部标签和浮出控件。

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