使用指标加载数据的正确方法

Question

我想在加载数据时显示活动指示器。 正确的做法是什么？

当我导航到此页面时，加载指示器根本不显示，在导航过程中感觉有点滞后，例如导航时发生加载。

View 和 ViewModel 被注册为瞬态。

在视图模型中：

[ObservableProperty]
bool _isBudy;

[ObservableProperty]
string _loadingText;

public ObservableRangeCollection<TestModel> Items { get; set; } = new ObservableRangeCollection<TestModel>();

public TestViewModel(IRepository repository)
{
    _repository = repository;
    LoadData();
}

private void LoadData() 
{
    Items.Clear();

    Task.Run(async () =>
    {
        try
        {
            await MainThread.InvokeOnMainThreadAsync(() =>
            {
               IsBusy = true;
               LoadingText = "Loading...";
            });
            _allItems = await _repository.GetAllAsync();
            Items.AddRange(_allItems );
        }
        catch (Exception)
        {

            throw;
        }
        finally 
        {
            await MainThread.InvokeOnMainThreadAsync(() =>
            {
                IsBusy = false;
            });
        }
    });
}

视图中：

<CollectionView
    IsVisible="{Binding IsBusy, Converter={StaticResource InvertedBoolConverter}}"
    ItemsSource="{Binding Items}"
    SelectionMode="None">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Name)"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

<VerticalStackLayout IsVisible="{Binding IsBusy}"
    HorizontalOptions="Center"
    Spacing="6"
    VerticalOptions="Center">
    <ActivityIndicator
        HeightRequest="44"
        HorizontalOptions="Center"
        IsRunning="{Binding IsBusy}"
        Scale="{OnPlatform iOS=1.3,
                           Android=1.0}"
        WidthRequest="44"
        Color="{DynamicResource PrimaryColor}" />

    <Label
        FontSize="14"
        HorizontalOptions="Center"
        HorizontalTextAlignment="Center"
        LineBreakMode="WordWrap"
        Text="{Binding LoadingText}"
        TextColor="{DynamicResource PrimaryColor}" />
</VerticalStackLayout>

Answer 1

因为您定义了以下变量，但您在

IsBusy

中使用了变量

.xaml

。

[ObservableProperty]
bool _isBudy;

所以，请尝试按如下方式更改定义的变量：

[ObservableProperty]
bool _isBusy;

并且根据您的代码，我添加了一些假数据来模拟这个问题。 但在我这边一切正常。

请参考以下代码：

    private void LoadData()
    {
        Items.Clear();

        Task.Run(async () =>
        {
            try
            {
                await MainThread.InvokeOnMainThreadAsync(() =>
                {
                    IsBusy = true;
                    LoadingText = "Loading...";
                });
                //_allItems = await _repository.GetAllAsync();
                // Items.AddRange(_allItems);

               //add Task.delay
                await Task.Delay(TimeSpan.FromSeconds(2));

               // add some fake data here
                AddItems();
            }
            catch (Exception)
            {

                throw;
            }
            finally
            {
                await MainThread.InvokeOnMainThreadAsync(() =>
                {
                    IsBusy = false;
                });
            }
        });
    }