MAUI中Shell Flyout绑定ObservableCollection模型属性失败排查

核心问题是FlyoutTermTemplate的绑定上下文被错误限制：你在Shell根节点设置了x:DataType="viewModel:TermViewModel"，导致所有子数据模板默认继承这个上下文，而FlyoutTermTemplate需要绑定的是Term模型的Name属性，不是TermViewModel的，因此编译时绑定报错。热重载时可能绕过了编译检查，所以暂时有效。

修复步骤 #

1. 给FlyoutTermTemplate指定正确的x:DataType

修改AppShell.xaml中的资源部分，明确指定数据模板的上下文为Term模型：

<Shell.Resources>
    <DataTemplate x:Key="FlyoutTermTemplate"
                  xmlns:model="clr-namespace:TermTracker.Model"
                  x:DataType="model:Term">
        <TextCell Text="{Binding Name}"/>
    </DataTemplate>
</Shell.Resources>

这样XAML编译时就能识别到模板的绑定对象是Term模型，正确找到Name属性。

2. 完善TermViewModel的Terms属性初始化

确保你的TermViewModel正确实现ObservableCollection<Term>属性，并异步加载数据：

using CommunityToolkit.Mvvm.ComponentModel;
using TermTracker.Model;

namespace TermTracker.ViewModel;

public partial class TermViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<Term> _terms = new();

    public TermViewModel()
    {
        _ = LoadTermsAsync();
    }

    private async Task LoadTermsAsync()
    {
        var fetchedTerms = await TermRepository.GetTerms();
        Terms.Clear();
        foreach (var term in fetchedTerms)
        {
            Terms.Add(term);
        }
    }
}

注意：异步逻辑不能直接放在构造函数中，需通过私有异步方法调用，用_ =避免编译器警告。

3. 简化TermRepository的GetTerms方法

当前循环新建Term对象的逻辑冗余，直接将查询结果转为ObservableCollection即可：

public static async Task<ObservableCollection<Term>> GetTerms()
{
    var db = LocalDatabase.GetConnection();
    var queryResult = await db.QueryAsync<Term>("SELECT * FROM Terms");
    return new ObservableCollection<Term>(queryResult);
}

4. 确认DI配置合理性

当前AppShell和TermViewModel都注册为Transient，每次创建AppShell都会生成新的ViewModel，这个配置没问题，但需确保LocalDatabase.GetConnection()已正确初始化数据库连接。

验证 #

重启应用后，Flyout中的ListView会绑定到TermViewModel的Terms集合，每个列表项通过FlyoutTermTemplate正确显示Term的Name属性，编译时绑定错误会消失，热重载与正常运行效果一致。

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