MAUI Blazor混合移动应用页面状态栈管理及Android导航键处理问题

一、自定义页面栈服务解决状态管理问题 #

默认的NavigationManager仅负责路由导航，不维护页面状态栈。你可以实现一个自定义的栈服务来管理页面路由和对应的状态：

1. 实现导航栈服务 #

创建一个包含状态栈逻辑的服务，用Stack存储每个页面的路由和状态数据：

public class NavigationStackService
{
    private readonly NavigationManager _navigationManager;
    private readonly Stack<PageStateEntry> _pageStack = new();

    public NavigationStackService(NavigationManager navigationManager)
    {
        _navigationManager = navigationManager;
    }

    // 压栈并导航到新页面，可传入初始状态
    public void Push(string route, object? state = null)
    {
        // 保存当前页面的路由和状态（需自行实现页面状态收集逻辑）
        var currentRoute = _navigationManager.Uri.Split('?')[0]; // 剔除查询参数
        var currentPageState = CollectCurrentPageState();
        
        if (!string.IsNullOrEmpty(currentRoute) && currentPageState != null)
        {
            _pageStack.Push(new PageStateEntry(currentRoute, currentPageState));
        }

        // 导航到目标路由
        _navigationManager.NavigateTo(route);
        
        // 保存新页面的初始状态（如果有）
        if (state != null)
        {
            _pageStack.Push(new PageStateEntry(route, state));
        }
    }

    // 弹栈并恢复上一页状态
    public void Pop()
    {
        if (_pageStack.Count == 0) return;

        var previousEntry = _pageStack.Pop();
        _navigationManager.NavigateTo(previousEntry.Route);
        // 触发状态恢复事件，通知页面加载状态
        PageStateRestored?.Invoke(this, previousEntry.State);
    }

    // 状态恢复事件，供页面订阅
    public event EventHandler<object?> PageStateRestored;

    // 示例：收集当前页面状态的逻辑（需根据页面实际实现）
    private object? CollectCurrentPageState()
    {
        // 可通过全局状态容器或页面组件暴露的属性获取状态
        // 比如使用IStateContainer或直接引用页面实例（需注意内存泄漏）
        return null;
    }

    // 公开栈长度，供Android端判断边界
    public int StackCount => _pageStack.Count;
}

// 存储页面路由与状态的实体类
public class PageStateEntry
{
    public string Route { get; }
    public object? State { get; }

    public PageStateEntry(string route, object? state)
    {
        Route = route;
        State = state;
    }
}

2. 注册服务 #

在Program.cs中注入这个服务：

builder.Services.AddScoped<NavigationStackService>();

3. 在Blazor页面中使用 #

页面组件订阅状态恢复事件，并用自定义服务替代NavigationManager进行导航：

@inject NavigationStackService NavStack
@implements IDisposable

<h3>订单列表页</h3>
<p>筛选条件：@_filterText</p>

<button @onclick="GoToDetail">查看订单详情</button>

@code {
    private string _filterText = "已支付";

    protected override void OnInitialized()
    {
        // 订阅状态恢复事件
        NavStack.PageStateRestored += RestorePageState;
    }

    private void GoToDetail()
    {
        // 压栈时传入当前页面状态
        NavStack.Push("/order-detail", _filterText);
    }

    private void RestorePageState(object? sender, object? state)
    {
        // 恢复页面状态
        if (state is string filter)
        {
            _filterText = filter;
            StateHasChanged();
        }
    }

    public void Dispose()
    {
        // 取消订阅避免内存泄漏
        NavStack.PageStateRestored -= RestorePageState;
    }
}

二、处理Android系统返回键 #

通过重写Android原生Activity的返回键逻辑，通知Blazor端调用自定义的Pop方法：

1. 修改MainActivity.cs #

在Platforms/Android/MainActivity.cs中重写OnBackPressed方法：

using Android.App;
using Android.Content.PM;
using Android.OS;
using Microsoft.Maui.Controls;

namespace YourAppNamespace;

[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle? savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
    }

    public override void OnBackPressed()
    {
        var navStack = MauiProgram.Services.GetService<NavigationStackService>();
        if (navStack != null && navStack.StackCount > 0)
        {
            // 通知Blazor端处理返回
            MessagingCenter.Send(this, "AndroidBackButtonPressed");
        }
        else
        {
            // 栈为空时，执行默认返回行为（退出应用）
            base.OnBackPressed();
        }
    }
}

2. 在Blazor中订阅返回事件 #

在全局组件（如MainLayout.razor）中订阅返回键消息，触发自定义返回逻辑：

@inject NavigationStackService NavStack
@implements IDisposable

@code {
    protected override void OnInitialized()
    {
        MessagingCenter.Subscribe<MainActivity>(this, "AndroidBackButtonPressed", _ =>
        {
            NavStack.Pop();
        });
    }

    public void Dispose()
    {
        MessagingCenter.Unsubscribe<MainActivity>(this, "AndroidBackButtonPressed");
    }
}

关键注意事项 #

• 状态存储：复杂状态建议使用可序列化的DTO，避免直接引用页面组件导致内存泄漏
• 页面状态收集：需根据页面业务逻辑实现CollectCurrentPageState方法，比如通过全局状态容器或组件属性获取状态
• 内存管理：页面销毁时务必取消状态恢复事件的订阅，防止内存泄漏

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