如何在ViewModel中控制登录页面的错误Label可见性

你这个是MVVM架构下的典型跨层控件属性控制场景，按以下三步操作即可实现：

1. 给ViewModel新增带变更通知的布尔属性 #

你的ViewModel需要实现INotifyPropertyChanged接口，新增对应控制错误提示显隐的属性：

// 你需要先确保ViewModel已继承INotifyPropertyChanged接口
private bool _isLoginErrorVisible = false;
public bool IsLoginErrorVisible
{
    get => _isLoginErrorVisible;
    set 
    {
        _isLoginErrorVisible = value;
        // 触发属性变更通知，告知View更新
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsLoginErrorVisible)));
    }
}

如果用了CommunityToolkit.Mvvm等MVVM辅助库，可以直接用注解简化代码：

[ObservableProperty]
private bool _isLoginErrorVisible = false;

2. 给前端Label做属性绑定 #

修改前端页面的Label代码，把IsVisible属性和ViewModel的属性做绑定：

<!-- 错误提示Label -->
<Label
    Text="账号或密码错误，请重新输入"
    TextColor="Red"
    IsVisible="{Binding IsLoginErrorVisible}"
/>

注意提前给当前页面的BindingContext设置为对应的登录ViewModel，否则绑定不会生效

3. 登录校验逻辑中修改属性值 #

在ViewModel的登录校验失败的分支里，直接给IsLoginErrorVisible赋值为true即可触发Label显示：

public async Task ExecuteLoginCommand()
{
    // 本地参数校验失败
    if(string.IsNullOrWhiteSpace(Account) || string.IsNullOrWhiteSpace(Password))
    {
        IsLoginErrorVisible = true;
        return;
    }
    // 调用登录接口返回失败
    var result = await _loginService.Login(Account, Password);
    if(!result.IsSuccess)
    {
        IsLoginErrorVisible = true;
        return;
    }
    // 登录成功后续逻辑
}

如果需要用户重新输入时自动隐藏错误提示，只需要在Account或Password属性的set方法里把IsLoginErrorVisible赋值为false即可。

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