MAUI导航后无法使用Flyout菜单。

Question

我正在将一个Xamarin Forms应用程序转换为MAUI。

在Android中，我发现如果我导航到另一页，我会失去顶部导航栏中的侧滑按钮（汉堡菜单按钮）。我还没有在iOS上尝试过，但我认为行为是相同的。

以下是我导航到我的初始页面的方式：

private void LaunchInitialPage(Page page)
{
    FlyoutPage FlyoutPage = new FlyoutPage
    {
        Detail = new NavigationPage(page)
        {
            BarBackgroundColor = Helpers.Colors.BarBackgroundColor,
            BarTextColor = Color.FromArgb("#ffffff")
        },
        Flyout = new MyDrawerMenu(),
        FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover
    };
    ((App)Application.Current).MainPage = FlyoutPage;
}

上述方法非常有效。我的页面已正确呈现，我也看到了汉堡菜单。

大多数情况下，当用户点击某个项目时，我希望“返回”按钮出现在页面的顶部。这个功能可行。但是有一些页面不需要返回按钮，所以我想将其删除并显示汉堡菜单。

以下是我的导航菜单长这样：

public async Task LaunchNextPage(Page page)
{
    Page mdp = (((App)Application.Current).MainPage as FlyoutPage).Detail;
    NavigationPage np = (NavigationPage)mdp;

    NavigationPage.SetHasBackButton(page, false);
    await np.PushAsync(page, true);
}

此代码已成功导航至第二页。返回按钮按预期工作，NavigationPage.SetHasBackButton(page,false)可从屏幕顶部的导航栏中删除返回按钮。

但是，我没有看到汉堡菜单。我仍然可以从左侧滑动并显示菜单，但我真的想看到汉堡菜单出现在页面顶部。

我应该指出，在Xamarin.Forms中，这确实按照我的预期工作。只有在迁移到MAUI时才会看到此行为。

非常感谢任何帮助！

- Mike Luken

---

我猜Shell自带的不是flyout，你试过那个了吗？ - Cfun

我尝试过Shell吗？是的，我们稍微尝试了一下Shell。但考虑到项目的规模，如果我们能找到一种不使用它就能让FlyoutPage正常工作的方法，那么转换到Shell就超出了项目的范围。因此，我希望能够弄清楚为什么上面的LaunchNextPage没有按照我的预期工作。 - Mike Luken

你的意思是当你隐藏了返回按钮，汉堡菜单也会被隐藏吗？你尝试过调试并检查 FlyoutPage.ShouldShowToobarButton() 的值吗？ - Liyun Zhang - MSFT

Answer 1

我无法找到一种好的方法，在不清除页面堆栈的情况下，将默认汉堡按钮带回请求，而我不想为所有页面执行此操作。因此，我能够通过在需要时设置标题视图并复制导航栏来使其正常工作。

public async Task LaunchNextPage(Page page)
{
    NavigationPage.SetHasBackButton(page, false);

    var fop = ((App)App.Current).MainPage as FlyoutPage;
    if (fop.Detail.Navigation.NavigationStack?.ToList()?.Count > 0)
    {
        NavigationPage.SetTitleView(this, new NavigationBar());
    }
    else
    {
        // at the beginning of the stack so already showing the burger menu
        NavigationPage.SetTitleView(this, null);
    }

    NavigationPage np = (NavigationPage)fop.Detail;
    await np.PushAsync(page, true);

    if (NavigationPage.GetTitleView(this) != null)
    {
        (NavigationPage.GetTitleView(this) as NavigationBar).Title = page.Title;
    }
}

NavigationBar.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<HorizontalStackLayout
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="NavigationBar" 
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="FillAndExpand" 
    Spacing="0"
    Padding="0"
    x:Name="this">

    <ImageButton
        x:Name="imgBurger"
        Source="hamburger_menu_icon.png" 
        WidthRequest="24" 
        HeightRequest="24"
        Margin="0,0,36,0"
        Clicked="imgBurger_Clicked"
        />

    <Label
        x:Name="lblNavBarTitle"
        VerticalOptions="Center"
        FontAttributes="Bold"
        FontSize="Medium" />

</HorizontalStackLayout>

NavigationBar.xaml.cs:

public partial class NavigationBar : HorizontalStackLayout
{ 
    public NavigationBar()
    {
        InitializeComponent();
        lblNavBarTitle.TextColor = Color.FromArgb("#FFFFFF");
        BackgroundColor = Color.FromArgb("#000000");
    }

    public string Title
    {
        set
        {
            lblNavBarTitle.Text = value;
        }
    }

    private void imgBurger_Clicked(object sender, EventArgs e)
    {
        var fop = ((App)App.Current).MainPage as FlyoutPage;
        fop.IsPresented = !fop.IsPresented;
    }
}

希望这能帮助到有需要的人!

- Mike Luken