MAUI Blazor应用：ContentPage与NavigationPage结合及导航问题

能否用NavigationPage解决？ #

可以。MAUI NavigationPage是原生导航容器，能保留原页面的状态（搜索查询、滚动位置），同时原生返回按钮可正常工作，完美解决你遇到的两个问题：

• 替代全屏模态div，解决返回历史按钮失效问题
• 替代Blazor内导航到新页面，避免原页面状态丢失

实现步骤 #

1. 将主页面包装进NavigationPage #

修改App.xaml（或App.cs），把原来的主ContentPage作为NavigationPage的根页面：

用XAML实现：

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.App">
    <NavigationPage>
        <x:Arguments>
            <local:MainPage /> <!-- 你的主页面，包含搜索和书籍列表的BlazorWebView -->
        </x:Arguments>
    </NavigationPage>
</Application>

用代码实现（App.cs）：

public App()
{
    InitializeComponent();
    // 把主页面包装进NavigationPage作为根
    MainPage = new NavigationPage(new MainPage());
}

2. 创建书籍详情页ContentPage #

新建一个带BlazorWebView的ContentPage，用于加载书籍详情的Blazor组件：

BookDetailPage.xaml：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.BookDetailPage"
             Title="书籍详情">
    <blazor:BlazorWebView HostPage="wwwroot/index.html">
        <blazor:BlazorWebView.RootComponents>
            <!-- 绑定你的书籍详情Blazor组件 -->
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:BookDetail}" />
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>
</ContentPage>

BookDetailPage.xaml.cs（接收书籍ID参数）：

public partial class BookDetailPage : ContentPage
{
    public string TargetBookId { get; }

    public BookDetailPage(string bookId)
    {
        InitializeComponent();
        TargetBookId = bookId;
        // 可通过服务或组件参数将bookId传递给Blazor详情组件
    }
}

3. 从主页面的书籍列表触发导航 #

在主页面的Blazor列表组件中，调用MAUI原生导航方法跳转到详情页：

@* 主页面的书籍列表组件 *@
@foreach (var book in FilteredBooks)
{
    <div class="book-item" @onclick="() => GoToBookDetail(book.Id)">
        @book.Title
    </div>
}

@code {
    private async Task GoToBookDetail(string bookId)
    {
        // 调用MAUI原生导航，将详情页推入导航栈
        await Application.Current.MainPage.Navigation.PushAsync(new BookDetailPage(bookId));
    }
}

为什么这能解决问题？ #

• NavigationPage会维护一个导航栈，原主页面会被保留在栈中，因此搜索查询、滚动位置等状态不会丢失
• 返回时无论是点击原生返回按钮，还是调用PopAsync，都会回到原主页面并恢复之前的状态
• 原生导航的返回逻辑和系统历史栈一致，不会出现模态div的返回按钮失效问题

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