MAUI中Flyout的Tab在屏幕底部重复显示为按钮如何消除？

方案1：保留Flyout侧边栏，隐藏底部Tab按钮 #

重复显示的原因是Tab控件默认会渲染底部导航栏，同时FlyoutItem又将这些Tab作为侧边栏项展示。要只保留Flyout，只需禁用底部Tab栏：

在Shell标签中添加Shell.TabBarIsVisible="False"属性，即可全局隐藏所有Tab的底部导航栏，同时Flyout侧边栏保持正常显示：

<Shell
    x:Class="OurApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:OurApp"
    Shell.FlyoutBehavior="Flyout" 
    Shell.NavBarIsVisible="False"
    Shell.TabBarIsVisible="False"> <!-- 添加该属性 -->

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Application" Route="application">
            <ShellContent Title="Login" Route="login" ContentTemplate="{DataTemplate local:Login}" />
            <ShellContent Title="About" Route="about" ContentTemplate="{DataTemplate local:About}" />
            <ShellContent Title="Exit" Route="exit" ContentTemplate="{DataTemplate local:Exit}" />
        </Tab>

        <Tab x:Name="ModulesTab" Title="Modules" Route="modules">
            <ShellContent Title="Receiving" Route="receiving" ContentTemplate="{DataTemplate local:Receiving}" />
            <ShellContent Title="Shipping" Route="shipping" ContentTemplate="{DataTemplate local:Shipping}" />
            <ShellContent Title="Putaway" Route="putaway" ContentTemplate="{DataTemplate local:Putaway}" />
        </Tab>
    </FlyoutItem>
</Shell>

如果只需隐藏特定Tab的底部栏，也可以单独给对应Tab标签添加Shell.TabBarIsVisible="False"属性。

方案2：保留底部Tab按钮，隐藏Flyout侧边栏 #

若想只保留底部Tab导航，只需将Shell.FlyoutBehavior设为Disabled，即可禁用Flyout侧边栏，仅显示底部Tab按钮：

<Shell
    x:Class="OurApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:OurApp"
    Shell.FlyoutBehavior="Disabled" <!-- 修改为Disabled -->
    Shell.NavBarIsVisible="False">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Application" Route="application">
            <ShellContent Title="Login" Route="login" ContentTemplate="{DataTemplate local:Login}" />
            <ShellContent Title="About" Route="about" ContentTemplate="{DataTemplate local:About}" />
            <ShellContent Title="Exit" Route="exit" ContentTemplate="{DataTemplate local:Exit}" />
        </Tab>

        <Tab x:Name="ModulesTab" Title="Modules" Route="modules">
            <ShellContent Title="Receiving" Route="receiving" ContentTemplate="{DataTemplate local:Receiving}" />
            <ShellContent Title="Shipping" Route="shipping" ContentTemplate="{DataTemplate local:Shipping}" />
            <ShellContent Title="Putaway" Route="putaway" ContentTemplate="{DataTemplate local:Putaway}" />
        </Tab>
    </FlyoutItem>
</Shell>

你也可以简化结构，直接将Tab作为Shell的子元素（去掉FlyoutItem），这样默认只会渲染底部Tab栏，无需额外设置Flyout行为。

内容的提问来源于stack exchange，提问作者eidylon