Урок 3. ListView бесконечный прокручиваемый список

За все время: 15726 просмотров, 5303 посетителя.
За последние 30 дней: 106 просмотров, 53 посетителя.
  1. Простой список с помощью конструктора ListView() – по умолчанию
  2. Бескочнечный список с помощью ListView.builder() – список по требованию
  3. Реальное использование ListView.builder() для бесконечных списков
  4. Задание для практики: бесконечный список степени числа 2 (два)

Виджет-класс ListView позволяет создавать конечные и бесконечные списки виджетов и делает их прокручиваемыми, если они не помещаются на экране или в отведенной для них области.

Под бесконечным списком мы будем понимать список элементов, который пополняется по мере необходимости, в нашем уроке – когда существующие элементы уже отображены. В мобильных приложениях такие списки повсюду: новостные ленты, списки сообщений, фотогалереи и т.п.

Класс ListView имеет несколько конструкторов, в этом уроке мы рассмотрим два из трех.

1. Простой список с помощью конструктора ListView() – по умолчанию

Создадим простой список текстовых элементов с использованием класса ListView.

Конструктор по умолчанию ListView() строит список из заданных элементов в параметре children.

Конструктор по умолчанию ListView() строит список из заданных элементов в параметре children

2. Бескочнечный список с помощью ListView.builder() – список по требованию

Конструктор ListView.builder() выводит элементы списка по требованию – вызывает функцию в параметре itemBuilder для создания новых элементов списка при прокрутке, позволяет создавать бесконечные списки виджетов.

Конструктор ListView.builder() выводит элементы списка по требованию

Функция в itemBuilder вызывается каждый раз с новым значением index, когда нужно заполнить экран или область которую занимает ListView.

3. Реальное использование ListView.builder() для бесконечных списков

В жизни для создания больших списков используется более сложная конструкция, чем мы описали выше.

Нам понадобится создать класс MyBody от супер-класса StatefulWidget (который мы рассмотрели в прошлом уроке).
MyBody будет вызывать функцию состояния через createState() => new MyBodyState();

Поэтому нам понадобится еще объявить класс MyBodyState от супер-класса State.

В классе MyBodyState мы объявим List<String> _array = []; скрытое поле-массив, в котором будут текстовые значения для элемента списка класса Text(). А функция build() будет возвращать список ListView.builder.

Рассмотрим подробно функцию build() в нашем классе MyBodyState:

Рекомендуем изучить сообщения, которые выводятся в консоль:

Бесконечный список ListView.builder с разделителямиСообщения консоли при добавлении нового элемента в список ListView

По мере того как Вы будете прокручивать список в эмуляторе или на смартфоне, список будет создавать новые элементы списка, и в консоли будут появляться новые сообщения.

4. Задание для практики: бесконечный список степени числа 2 (два)

  1. Измените строковый список List<String> _array = []; на числовой List<int> _array = [];
  2. Попробуйте изменить приведенный выше код для вывода бесконечного списка степени числа 2 с помощью математической функции pow() и без нее.
  3. Результат должен быть похожим как на изображении ниже
      Бесконечный список степени числа 2 (два)
  4. Можно ли сделать на Flutter бесконечный список для степени числа 2 с помощью типа int или double?
  5. Какие бесконечные списки Вы можете придумать?

Для выполнения задания вам понадобится:

Ваши вопросы и ответы в виде кода программы присылайте на нашу почту contact@flutter.ru, в теме письма обязательно указывайте «Урок № 3».