MAUI ContentView中如何实现数据绑定与API数据加载？

问题根源分析 #

你当前的实现存在两个核心问题：

1. 手动实例化服务与ViewModel，未利用DI容器管理依赖，导致_client未初始化，服务无法正常发起HTTP请求。
2. 错误使用BindingContextChanged事件作为数据加载触发点，且重复绑定事件，逻辑冗余且时机不准确。

正确实现步骤 #

1. 确保DI容器注册相关服务

在MauiProgram.cs中注册ViewModel与业务服务，确保依赖能被正确注入：

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    // 注册HttpClient（如果BaseService依赖）
    .Services.AddHttpClient()
    // 注册业务服务
    .AddTransient<LightCastArchiveService>()
    .AddTransient<LightCastChannelService>()
    // 注册ViewModel
    .AddTransient<LatestViewModel>();

2. 修改ContentView代码，依赖注入ViewModel+使用Loaded事件触发加载

ContentView没有OnAppearing方法，改用Loaded事件作为数据加载的时机，同时通过构造函数注入ViewModel：

public partial class Latest : ContentView
{
    private readonly LatestViewModel _latestViewModel;

    // 构造函数注入ViewModel，由DI容器自动填充依赖
    public Latest(LatestViewModel latestViewModel)
    {
        InitializeComponent();
        _latestViewModel = latestViewModel;
        BindingContext = _latestViewModel;
        
        // 订阅Loaded事件，控件渲染完成后触发数据加载
        Loaded += OnLatestLoaded;
    }

    private async void OnLatestLoaded(object sender, EventArgs e)
    {
        // 避免重复加载：仅当无数据且未在加载时执行
        if (!_latestViewModel.Videos.Any() && !_latestViewModel.IsLoading)
        {
            await _latestViewModel.LoadVideos();
        }
    }
}

3. 确保ViewModel集合与属性符合绑定要求

ViewModel中需使用ObservableCollection实现集合自动更新UI，同时IsLoading等属性需触发属性变更通知：

public class LatestViewModel : INotifyPropertyChanged
{
    private bool _isLoading;
    public bool IsLoading
    {
        get => _isLoading;
        set
        {
            _isLoading = value;
            OnPropertyChanged();
        }
    }

    private bool _isRefreshing;
    public bool IsRefreshing
    {
        get => _isRefreshing;
        set
        {
            _isRefreshing = value;
            OnPropertyChanged();
        }
    }

    // 使用ObservableCollection实现集合变更自动通知UI
    public ObservableCollection<LCVideo> Videos { get; } = new ObservableCollection<LCVideo>();

    // 其余构造函数与LoadVideos方法保持不变...

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

核心优化点说明 #

• 全程依赖DI管理对象：避免手动实例化导致的依赖缺失（如HttpClient为null），保证服务生命周期与全局一致。
• 选择正确的加载时机：Loaded事件在ContentView完成渲染后触发，更贴合数据加载的业务逻辑，避免过早调用导致控件未初始化。
• 防重复加载逻辑：通过判断集合状态与加载状态，避免控件重复触发加载请求。

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