Я хотел бы показывать индикатор активности во время загрузки данных. Каков правильный путь?
Когда я перехожу на эту страницу, индикатор загрузки вообще не отображается, во время навигации ощущается небольшая задержка, например, загрузка происходит во время навигации.
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>
Поскольку вы определили следующую переменную, но использовали переменную 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;
});
}
});
}
Да, это была опечатка. Кажется, он загружается очень быстро, поэтому на моей стороне загрузка не отображается.