如何在MAUI Blazor中实现复选框与布尔值的双向绑定？

问题核心 #

你当前代码的问题在于：标记为[Parameter]的属性不能直接修改值来触发UI同步。Blazor中组件参数的双向绑定需要配套EventCallback来通知父组件更新值，否则修改参数属性不会触发UI刷新。

场景1：与父组件双向绑定（保留Parameter） #

如果IsChecked需要和父组件进行数据同步，使用以下修正代码：

<input type="checkbox" @bind-value="IsChecked" @bind-value:after="CheckboxChanged">
<button @onclick="Toggle">Toggle</button>

@code
{
    [Parameter]
    public bool IsChecked { get; set; } = true;

    // 必须添加配套的EventCallback，用于通知父组件更新值
    [Parameter]
    public EventCallback<bool> IsCheckedChanged { get; set; }

    private async void CheckboxChanged()
    {
        // 通过回调通知父组件更新值
        await IsCheckedChanged.InvokeAsync(IsChecked);
        Console.WriteLine($"Checkbox changed {IsChecked}");
    }

    protected async void Toggle()
    {
        var newValue = !IsChecked;
        // 同样通过回调触发值更新，而非直接修改Parameter属性
        await IsCheckedChanged.InvokeAsync(newValue);
        Console.WriteLine($"--- Toggle: {newValue}");
    }
}

父组件使用时需写为：

<YourCheckboxComponent @bind-IsChecked="ParentIsCheckedVariable" />

场景2：组件内部独立维护状态（无需父组件交互） #

如果IsChecked仅在当前组件内使用，不需要和父组件同步，直接去掉[Parameter]，改用私有字段即可：

<input type="checkbox" @bind-value="_isChecked" @bind-value:after="CheckboxChanged">
<button @onclick="Toggle">Toggle</button>

@code
{
    private bool _isChecked = true;

    private void CheckboxChanged()
    {
        Console.WriteLine($"Checkbox changed {_isChecked}");
        // 这里可以添加写入存储的逻辑
    }

    protected void Toggle()
    {
        _isChecked = !_isChecked;
        Console.WriteLine($"--- Toggle: {_isChecked}");
        // 这里可以添加写入存储的逻辑
    }

    // 启动时读取存储的示例逻辑
    protected override async Task OnInitializedAsync()
    {
        // 示例：从MAUI Preferences读取存储值
        // _isChecked = await Preferences.GetAsync("IsChecked", true);
        await base.OnInitializedAsync();
    }
}

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