添加Observable特性后MAUI MVVM应用界面数据不显示问题

你遇到的核心问题是ViewModel中的playerModal属性未实现属性变更通知，同时部分代码存在线程安全和逻辑错误，导致添加ObservableProperty后界面无法显示数据。以下是具体修复步骤：

1. 修复ViewModel的属性通知问题 #

将ViewModel中的playerModal普通属性改为使用[ObservableProperty]标记，确保界面能感知到对象的属性变化：

using CommunityToolkit.Mvvm.ComponentModel;
// ... 其他命名空间

namespace MauiApp2.ViewModels
{
    public partial class MultiplicationPageViewModel : BaseViewModel
    {
        public ObservableCollection<PlayerModal> PlayerDetails { get; set; } = new ObservableCollection<PlayerModal>();
        
        // 替换原有的playerModal属性
        [ObservableProperty]
        PlayerModal playerModal = new PlayerModal();
        
        public ICommand SubmitAnswerCommand { get; }

        public MultiplicationPageViewModel(INavigationService navigationService) : base(navigationService)
        {
            PlayerModal.Score = 0;
            PlayerModal.TimeReaming = 60;
            SubmitAnswerCommand = new Command(SubmitAnswer);

            GenerateQuestion();
            StartTimer();
        }
        
        // ... 其他方法保持不变
    }
}

注意：使用[ObservableProperty]后，自动生成的属性是首字母大写的PlayerModal，所以代码中访问时要改为PlayerModal.Score（而非原来的playerModal.Score）。

2. 修正XAML绑定路径 #

由于ViewModel的属性名称变为大写的PlayerModal，需要同步修改XAML中的绑定路径：

<HorizontalStackLayout>
    <Label Text="Score: " FontSize="18" />
    <Label Text="{Binding PlayerModal.Score}" FontSize="18" />
</HorizontalStackLayout>

<HorizontalStackLayout>
    <Label Text="Time Remaining: " FontSize="18" />
    <Label Text="{Binding PlayerModal.TimeReaming}" FontSize="18" />
</HorizontalStackLayout>

<HorizontalStackLayout>
    <Label Text="Question: " FontSize="18" />
    <Label Text="{Binding PlayerModal.Question}" FontSize="18" />
</HorizontalStackLayout>

<Entry Placeholder="Enter Your Answer" Text="{Binding PlayerModal.Answer}" FontSize="18" />

3. 修复Timer的线程安全问题 #

StartTimer方法中修改UI绑定属性时，必须确保在主线程执行，否则无法更新界面：

using Microsoft.Maui.ApplicationModel;
// ... 其他命名空间

public async void StartTimer()
{
    while (true)
    {
        await Task.Delay(1000);
        // 切换到主线程修改属性
        MainThread.BeginInvokeOnMainThread(() =>
        {
            PlayerModal.TimeReaming--;

            if (PlayerModal.TimeReaming == 0)
            {
                if (PlayerModal.Score > PlayerModal.HighScore)
                {
                    PlayerModal.HighScore = PlayerModal.Score;
                }
                GameOver();
            }
        });
    }
}

4. 修正SubmitAnswer的逻辑错误 #

当前代码中直接将用户输入作为正确答案，这是逻辑错误，需要从题目中解析出正确答案：

public void SubmitAnswer()
{
    if (int.TryParse(PlayerModal.Answer, out int userAnswer))
    {
        // 从Question中解析正确答案
        string[] questionParts = PlayerModal.Question.Split('x');
        if (int.TryParse(questionParts[0].Trim(), out int num1) && int.TryParse(questionParts[1].Trim(), out int num2))
        {
            int correctAnswer = num1 * num2;
            if (userAnswer == correctAnswer)
            {
                PlayerModal.Score += 10;
                PlayerModal.TimeReaming += 5;
            }
            else
            {
                PlayerModal.Score -= 10;
                PlayerModal.TimeReaming -= 5;

                if (PlayerModal.Score < 0) PlayerModal.Score = 0;
                if (PlayerModal.TimeReaming < 0) PlayerModal.TimeReaming = 0;
            }

            GenerateQuestion();
        }
    }

    PlayerModal.Answer = "";

    if (PlayerModal.Score > PlayerModal.HighScore)
    {
        PlayerModal.HighScore = PlayerModal.Score;
    }
}

5. 确保BaseViewModel继承ObservableObject #

确认你的BaseViewModel继承自ObservableObject，否则ViewModel的属性变更无法通知界面：

using CommunityToolkit.Mvvm.ComponentModel;

public class BaseViewModel : ObservableObject
{
    protected readonly INavigationService NavigationService;

    public BaseViewModel(INavigationService navigationService)
    {
        NavigationService = navigationService;
    }
}

完成以上修改后，界面就能正常显示计数器、题目、分数等内容，且属性变更会实时同步到界面。

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