Правильный способ загрузки данных с помощью индикатора

Я хотел бы показывать индикатор активности во время загрузки данных. Каков правильный путь?

Когда я перехожу на эту страницу, индикатор загрузки вообще не отображается, во время навигации ощущается небольшая задержка, например, загрузка происходит во время навигации.

View и ViewModel регистрируются как временные.

В модели представления:

[ObservableProperty]
bool _isBusy;

[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>
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
                });
            }
        });
    }

Да, это была опечатка. Кажется, он загружается очень быстро, поэтому на моей стороне загрузка не отображается.

Zoltán 18.04.2024 10:19

Другие вопросы по теме