如何确保Xamarin/MAUI ViewModel数据在UI消费前完成加载？

我在应用中通过异步任务从REST API请求车辆集合并存储到属性中，页面使用Picker绑定该ObservableCollection。页面加载时若快速操作Picker，会出现Picker未填充的情况，等待片刻重新打开则恢复正常。推测是异步任务未完成UI先行加载，希望了解如何测试UI加载时的数据值，以及避免用户遇到此类问题的措施。

简化ViewModel代码 #

internal class BaseVehicleViewModel : BaseViewModel
{
    public BaseVehicleViewModel()
    {
        Task.Run(async () => await GetAssets()).ConfigureAwait(false);
    }

    protected ObservableCollection<Asset> vehicles;

    public ObservableCollection<Asset> Vehicles
    {
        get => vehicles;
        set => SetProperty(ref vehicles, value);
    }

    protected async Task GetAssets()
    {
        var vehicles = await App.AppServiceClient.AssetsAsync();
        if (vehicles != null)
        {
            Vehicles = new ObservableCollection<Asset>(vehicles.Where(v => v.Active == 1));
        }
    }
}

简化View代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App.Views.Page"
             xmlns:vm="clr-namespace:App.ViewModels">

    <ContentPage.BindingContext>
        <vm:ViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <Picker Title="Select a vehicle"
                ItemsSource="{Binding Vehicles}"
                ItemDisplayBinding="{Binding Reg}"
                SelectedItem="{Binding SelectedVehicle, Mode=TwoWay}"/>
    </ContentPage.Content>
</ContentPage>

问题根源 #

1. 构造函数中使用Task.Run+ConfigureAwait(false)启动异步任务，可能导致集合赋值操作不在UI线程执行，延迟UI更新。
2. 直接替换ObservableCollection实例，绑定系统可能无法及时感知数据变化，尤其是在UI已加载但数据未返回的时段。
3. 缺乏加载状态提示，用户无法感知数据正在加载，过早操作Picker导致空列表。

解决措施 #

1. 初始化集合实例，避免替换整个集合 #

提前初始化ObservableCollection实例，后续只更新集合内的数据，保持绑定实例不变，确保UI能实时响应数据变化：

internal class BaseVehicleViewModel : BaseViewModel
{
    public BaseVehicleViewModel()
    {
        // 提前初始化空集合，避免绑定到null
        Vehicles = new ObservableCollection<Asset>();
        _ = LoadAssetsAsync();
    }

    // 改为只读属性，防止意外替换集合实例
    public ObservableCollection<Asset> Vehicles { get; }

    protected async Task LoadAssetsAsync()
    {
        try
        {
            var vehicles = await App.AppServiceClient.AssetsAsync();
            if (vehicles != null)
            {
                var activeVehicles = vehicles.Where(v => v.Active == 1);
                // 清空现有数据再添加新数据
                Vehicles.Clear();
                foreach (var vehicle in activeVehicles)
                {
                    Vehicles.Add(vehicle);
                }
            }
        }
        catch (Exception ex)
        {
            // 异常处理：记录日志或提示用户加载失败
        }
    }
}

2. 添加加载状态，禁用Picker直到数据加载完成 #

通过IsLoading属性控制加载指示器显示和Picker的启用状态，避免用户过早操作：

ViewModel新增属性

private bool _isLoading;
public bool IsLoading
{
    get => _isLoading;
    set => SetProperty(ref _isLoading, value);
}

protected async Task LoadAssetsAsync()
{
    IsLoading = true;
    try
    {
        var vehicles = await App.AppServiceClient.AssetsAsync();
        if (vehicles != null)
        {
            var activeVehicles = vehicles.Where(v => v.Active == 1);
            Vehicles.Clear();
            foreach (var vehicle in activeVehicles)
            {
                Vehicles.Add(vehicle);
            }
        }
    }
    catch (Exception ex)
    {
        // 异常处理
    }
    finally
    {
        IsLoading = false;
    }
}

View修改（添加加载指示器和Picker禁用逻辑）

首先定义一个InverseBooleanConverter（用于反转布尔值）：

public class InverseBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !(bool)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !(bool)value;
    }
}

然后在XAML中引用并使用：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App.Converters"
             x:Class="App.Views.Page"
             xmlns:vm="clr-namespace:App.ViewModels">

    <ContentPage.Resources>
        <local:InverseBooleanConverter x:Key="InverseBooleanConverter" />
    </ContentPage.Resources>

    <ContentPage.BindingContext>
        <vm:ViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">
            <ActivityIndicator IsRunning="{Binding IsLoading}" 
                               IsVisible="{Binding IsLoading}"
                               VerticalOptions="Center" />
            <Picker Title="Select a vehicle"
                    ItemsSource="{Binding Vehicles}"
                    ItemDisplayBinding="{Binding Reg}"
                    SelectedItem="{Binding SelectedVehicle, Mode=TwoWay}"
                    IsEnabled="{Binding IsLoading, Converter={StaticResource InverseBooleanConverter}}"
                    VerticalOptions="Center"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

3. 优化异步任务启动方式 #

构造函数中无需使用Task.Run，直接调用异步方法即可，同时去掉ConfigureAwait(false)，确保UI相关操作在UI线程执行：

public BaseVehicleViewModel()
{
    Vehicles = new ObservableCollection<Asset>();
    _ = LoadAssetsAsync(); // 直接启动异步任务，无需Task.Run包装
}

4. 测试UI加载时的数据状态 #

• 单元测试：模拟AssetsAsync的返回数据，编写测试用例验证ViewModel初始化时Vehicles为空，数据加载完成后集合正确填充。
• 调试验证：在调试模式下，分别在LoadAssetsAsync方法和Picker绑定触发处设置断点，观察数据加载时序与UI更新的同步情况。
• 模拟慢网络测试：使用网络限速工具模拟低速网络，快速操作Picker，验证加载状态提示是否正常，Picker是否在数据加载完成后才可用。

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