MAUI/MudBlazor/MVVM Toolkit：可观察属性无法更新UI求助

架构老林

2026-8-7

问题解决：RelayCommand触发后UI不更新的问题

问题原因

Blazor组件在处理**组件内事件（如OnClick）**时，会自动触发组件重渲染；但通过ViewModel的RelayCommand执行集合更新操作时，Blazor默认不会监听ObservableCollection的CollectionChanged事件，因此不会主动重渲染组件，导致新添加的项要等到下一次组件重渲染（比如点击OnClick按钮）才会显示。

解决方案

在Blazor组件中订阅ViewModel里ObservableCollection的CollectionChanged事件，当集合内容变化时手动触发组件重渲染。

修改后的Index.razor代码

@page "/"
@inject ViewModels.TestViewModel vm

<PageTitle>Index</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
<MudText Class="mb-8">Welcome to your new app, powered by MudBlazor!</MudText>
<MudAlert Severity="Severity.Normal">You can find documentation and examples on our website here: <MudLink Typo="Typo.body2" Color="Color.Inherit"><b>www.mudblazor.com</b></MudLink></MudAlert>

<ul>
    @foreach (string item in vm.Items)
    {
        <li>@item</li>
    }
</ul>

<MudButton Command="@vm.RebuildCommand" >Test via Command</MudButton>
<MudButton OnClick="@OnClickRebuild">Test via OnClick</MudButton>

@code {
    protected override void OnInitialized()
    {
        // 订阅集合变化事件，触发组件重渲染
        vm.Items.CollectionChanged += (_, __) => StateHasChanged();
        base.OnInitialized();
    }

    public void OnClickRebuild()
    {
        vm.Test("OnClick");
    }
}