xaml - 如何仅在特定页面上设置弹出菜单 - .NET MAUI

Question

我正在制作的应用程序是一个带有膳食食谱的应用程序。启动应用程序后，向用户显示的第一件事是登录页面，用户输入数据并单击“登录”按钮后，将转到主页。在该页面上有一些定义的菜肴菜单以及应该是菜单的内容，即左上角的弹出菜单(作为导航栏的一部分)，但没有这样的东西。唯一显示的是一个箭头，可带您返回登录页面。我在 appshell 中使用元素(开胃菜、主菜和甜点)定义了弹出窗口，并尝试添加属性，以便弹出窗口在登录页面上不可见，但仅在登录后可见。对于登录页面，我设法使它可以在 Shell.FlyoutBehavior="Disabled"属性的帮助下实现，但是对于主页的“Flyout”属性来说，这不起作用。

AppShell 代码:

<Shell
    x:Class="ReceptiUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ReceptiUI"
    Shell.FlyoutItemIsVisible="True"
    Shell.FlyoutBehavior="Flyout">

<ShellContent
    Shell.FlyoutBehavior="Disabled"
    Title="Home"
    ContentTemplate="{DataTemplate local:Login}"
    Route="Login" />

<ShellContent
    Shell.FlyoutBehavior="Flyout"
    Title="Home"
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage"/>

<FlyoutItem Title="Predjelo" Icon="breakfast.png">
   <ShellContent ContentTemplate="{DataTemplate local:Breakfast}"/>
</FlyoutItem>
<FlyoutItem Title="Glavno jelo" Icon="food.png">
    <ShellContent ContentTemplate="{DataTemplate local:Lunch}"/>
</FlyoutItem>
<FlyoutItem Title="Desert" Icon="dinner.png">
     <ShellContent ContentTemplate="{DataTemplate local:Dinner}"/>
</FlyoutItem>
<FlyoutItem Title="Meni" Icon="dinner.png">
    <ShellContent ContentTemplate="{DataTemplatelocal:ListaJela}"/>
</FlyoutItem>

我还设置了这些属性 'Shell.FlyoutItemIsVisible="True"' 主页上有 'Shell.FlyoutBehavior="Flyout"'，但仍然没有弹出菜单。

Answer 1

你可以写一个 FlyoutPage在主页中而不是使用 AppShell 中的 shell 弹出按钮。

这是代码演示:

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:FlyoutPageNavigation"
            x:Class="FlyoutPageNavigation.MainPage">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

在 AppShell 中，您只需编写一个普通的导航即可从登录页面导航到主页。