Ленивая загрузка данных JSON в Xamarin.Forms ListView: Обзор

Ленивая загрузка, или загрузка по требованию, — это техника, повышающая производительность загрузки. С ее помощью мы можем показать фиксированное количество данных при первоначальной загрузке огромного набора данных. После того как пользователь прокрутит список до конца, мы можем добавлять новые данные в конец списка, пока они не закончатся. Это также известно как бесконечная прокрутка или инкрементная загрузка.

Элемент управления Syncfusion Xamarin.Forms ListView (SfListView) представляет собой интерфейс, похожий на список. Он может отображать набор элементов данных вертикально или горизонтально в линейной или сеточной структуре. Он также обеспечивает поддержку ленивой загрузки с помощью функции Load More. Ленивую загрузку можно включить как вручную, так и автоматически.

В этом блоге вы узнаете, как показать фиксированное количество данных JSON при первоначальной загрузке (ленивая загрузка) и показать индикатор занятости при загрузке оставшихся данных при прокрутке в Xamarin.Forms ListView.

Пополнение коллекции данных JSON из URI

Выполните следующие шаги, чтобы заполнить коллекцию данных JSON из URI:

Шаг 1 : Установите пакет Newtonsoft.Json NuGet в ваш общий проект Xamarin.Forms.

Шаг 2 : Затем загрузите данные JSON из URI с помощью метода HttpClient и сохраните их в локальном файле.

public async Task<bool> DownloadJsonAsync()
{
  try
  {
    var url = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; //Set your REST API url here

    //Sends a request to retrieve data from the web service for the specified Uri
    var response = await httpClient.GetAsync(url);
    using (var stream = await response.Content.ReadAsStreamAsync()) //Reads data as stream
    {
      //Gets the path to the specified folder
      var localFolder = System.Environment.GetFolderPath(System.Environment.SpecialFolder.LocalApplicationData);

      var newpath = Path.Combine(localFolder, "Data.json"); // Combine path with the file name

      var fileInfo = new FileInfo(newpath);
      File.WriteAllText(newpath, String.Empty);

      //Creates a write-only file stream
      using (var fileStream = fileInfo.OpenWrite())
      {
         await stream.CopyToAsync(fileStream); //Reads data from the current stream and write to destination stream (fileStream)
      }
    }
  }
  catch (OperationCanceledException e)
  {
     System.Diagnostics.Debug.WriteLine(@"ERROR {0}", e.Message);
     return false;
  }
  catch (Exception e)
  {
     System.Diagnostics.Debug.WriteLine(@"ERROR {0}", e.Message);
     return false;
  }
  return true;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Шаг 3: Теперь вы можете получить данные JSON в виде списка динамических объектов. Обратитесь к следующему примеру кода.

private async void GetDataAsync()
{
  isDownloaded = await DataService.DownloadJsonAsync();
  if (isDownloaded)
  {
    var localFolder = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData);
    var fileText = File.ReadAllText(Path.Combine(localFolder, "Data.json"));

    //Read data from the local path and set it to the collection bound to the ListView.
    JSONCollection = JsonConvert.DeserializeObject<IList<dynamic>>(fileText);
    totalItems = JSONCollection.Count;
  }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Свойство LoadMoreCommand постепенно использует коллекцию данных JSON для загрузки элементов по требованию. Как я уже говорил, мы можем лениво загружать данные вручную или автоматически в Xamarin.Forms ListView.

Давайте посмотрим, как этого добиться на примерах кода!

Ленивая загрузка данных JSON вручную в Xamarin.Forms ListView

Чтобы загрузить больше элементов вручную в ListView, установите LoadMoreOption как Manual с помощью свойств LoadMoreCommand и LoadMoreCommandParameter. Это позволит загружать больше элементов при нажатии кнопки Load More в конце списка.

Обратитесь к следующему примеру кода, чтобы связать ViewModel. LoadMoreItemsCommand к Xamarin.Forms ListView.

<syncfusion:SfListView x:Name="listView"
                         ItemSize="{OnPlatform Android=115, Default=100}"
                         ItemsSource="{Binding Items}"
                         LoadMoreOption="Auto"
                         LoadMoreCommand="{Binding LoadMoreItemsCommand}"
                         IsBusy="{Binding IsBusy}"
                         ItemSpacing="5"
                         LoadMoreCommandParameter="{Binding Source={x:Reference Name=listView}}">
Вход в полноэкранный режим Выход из полноэкранного режима

См. следующее определение кода для LoadMoreItemsCommand в ViewModel.

private bool CanLoadMoreItems(object obj)
{
  if (Items.Count >= totalItems)
  return false;
  return true;
}

private async void LoadMoreItems(object obj)
{
   var listview = obj as SfListView;
   try
   {
      IsBusy = true;
      await Task.Delay(1000);
      var index = Items.Count;
      var count = index + 3 >= totalItems ? totalItems - index : 3;
      AddProducts(index, count);
   }
   catch
   {

   }
   finally
   {
      IsBusy = false;
   }
}

private void AddProducts(int index, int count)
{
  for (int i = index; i < index + count; i++)
  {
     Items.Add(JSONCollection[i]);
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

После выполнения приведенного выше примера кода мы получим результат, как на следующем изображении GIF.

Ленивая автоматическая загрузка данных JSON в Xamarin.Forms ListView

Чтобы автоматически загружать больше элементов в ListView, установите опцию LoadMoreOption как Auto с помощью свойств LoadMoreCommand и LoadMoreCommandParameter. Это позволит загружать больше элементов, когда полоса прокрутки достигнет конца списка.

Обратитесь к следующему примеру кода.

<syncfusion:SfListView x:Name="listView"
                         ItemSize="{OnPlatform Android=105, Default=100}"
                         ItemsSource="{Binding Items}"
                         LoadMoreOption="Auto"
                         LoadMoreCommand="{Binding LoadMoreItemsCommand}"
                         IsBusy="{Binding IsBusy}"
                         ScrollBarVisibility="Always"
                         LoadMoreCommandParameter="{Binding Source={x:Reference Name=listView}}"/>
Вход в полноэкранный режим Выход из полноэкранного режима

После выполнения приведенного выше примера кода мы получим результат, как на следующем изображении GIF.

Ссылка на GitHub

Полный пример ленивой загрузки JSON-данных в Xamarin.Forms ListView можно найти на GitHub.

Заключение

Спасибо за чтение! Мы рассмотрели, как лениво загружать данные JSON в Syncfusion Xamarin.Forms ListView. Для получения более подробной информации обратитесь к функции load more в документации по Xamarin ListView. Попробуйте выполнить шаги, описанные в этом блоге, и легко повысите производительность загрузки. Не забудьте оставить свой отзыв в разделе комментариев ниже!

Для текущих клиентов новая версия Essential Studio доступна для загрузки со страницы Лицензии и загрузки. Если вы еще не являетесь клиентом Syncfusion, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы ознакомиться с нашими новейшими функциями.

Вы также можете связаться с нами через наш форум поддержки, портал поддержки или портал обратной связи. Мы всегда рады помочь вам!

Похожие блоги

  • Просмотр аннотаций PDF в виде списка и навигация с помощью Xamarin.Forms PDF Viewer
  • Воспроизведем пользовательский интерфейс интернет-магазина в Xamarin.Forms
  • Создание представления мастера в Xamarin.Forms: Руководство для новичка
  • Создание макета плавающей этикетки в Xamarin.Forms DataForm

Оцените статью
devanswers.ru
Добавить комментарий