Blazor MAUI Hybrid中OnPropertyChanged无法正常工作的问题

核心原因 #

Blazor不会自动监听外部单例服务的PropertyChanged事件，且异步方法中设置Loading状态后，后续的await操作可能导致UI线程没有及时渲染更新。

解决方案步骤 #

1. 在Blazor组件中订阅服务的属性变更事件 #

修改Blazor页面代码，注入服务并订阅PropertyChanged事件，触发组件状态更新：

@page "/LoginComponent"
@inject NetworkStatusService NetworkStatusService
@implements IDisposable

<div class="Grid">
    @switch (NetworkStatusService.NetwStat)
    {
        case NetwStatus.Loading:
            <h6 style="font-size:0.8rem; margin-bottom:-12px; color:coral">Trying to connect...</h6>
            break;
        case NetwStatus.Success:
            <h6 style="font-size:0.8rem; margin-bottom:-12px; color:green">Connected successfully.</h6>
            break;
        case NetwStatus.Fail:
            <h6 style="font-size:0.8rem; margin-bottom:-12px; color:red">Connection failed.</h6>
            break;
        default:
            break;
    }    
    <i @onclick="ViewModel.btnNetwOkCommand.ExecuteAsync">refresh</i>
</div>

@code {
    protected override void OnInitialized()
    {
        // 订阅属性变更事件，触发组件重新渲染
        NetworkStatusService.PropertyChanged += (_, __) => StateHasChanged();
    }

    public void Dispose()
    {
        // 取消订阅，避免内存泄漏
        NetworkStatusService.PropertyChanged -= (_, __) => StateHasChanged();
    }
}

2. 让UI有机会渲染Loading状态 #

修改NetworkStatusService的CheckNetw方法，在设置Loading状态后添加await Task.Yield()，让出线程给UI渲染：

public async Task CheckNetw()
{
    NetwStat = NetwStatus.Loading;
    await Task.Yield(); // 让出线程，确保UI先渲染Loading状态

    await Task.Delay(1000);

    if (await SomeClass.CheckDBConnection())
        NetwStat = NetwStatus.Success;
    else
        NetwStat = NetwStatus.Fail;
}

3. 确认命令调用的异步正确性 #

确保ViewModel.btnNetwOkCommand的ExecuteAsync方法是正确异步调用CheckNetw，避免使用.Wait()或.Result()等阻塞操作，示例：

// 命令实现示例
public IAsyncCommand btnNetwOkCommand => new AsyncCommand(async () =>
{
    await NetworkStatusService.CheckNetw();
});

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