Компонент «Список»

Компонент «Список» (ListView) в MIT App Inventor — это компонент для отображения и взаимодействия с прокручиваемыми списками данных. Он позволяет создавать как простые списки, так и списки с картинками и возможностью поиска по элементам.

Настройки

• Цвет фона — цвет фона блока списка.
• Цвет разделителя (DividerColor) — цвет линии-разделителя между элементами.
• Толщина разделителя (DividerThickness) — толщина линии-разделителя. При 0 разделитель не показывается.
• Цвет элемента (ElementColor) — цвет фона элементов списка.
• Радиус скругления элемента (ElementCornerRadius) — радиус скругления границ элементов.
• Ширина полей элемента (ElementMarginsWidth) — размер полей элементов списка.
• Размер шрифта — размер шрифта основного текста.
• Размер шрифта детального (FontSizeDetail) — размер шрифта детального текста.
• Тип шрифта — какой шрифт будет использован для основного текста: с засечками (на конце букв будут засечки), без них, моноширный (одинаковая ширина букв).
• Тип шрифта детального — какой шрифт будет использован для детального текста: с засечками (на конце букв будут засечки), без них, моноширный (одинаковая ширина букв).
• Высота — высота блока, может задаваться в пикселях, процентах, а также занимать всю высоту родительского элемента. Если на прокручиваемом экране добавить список со свойством высоты «Наполнить родительский», то компонент списка будет работать некорректно.
• Ширина — ширина блока, может задаваться в пикселях, процентах, а также занимать всю ширину родительского элемента.
• Высота изображения, ширина изображения — параметры изображений, которые используются в элементах списка. Задается только в пикселях, но при этом учитываются пропорции изображения.
• Тип макета (ListViewLayout) — тип отображения списка. В зависимости от выбора варианта отображения будет меняться набор полей в настройке «Данные списка». Варианты отображения:
  • только основной текст;
  • основной и детальный текст, горизонтальный вид;
  • основной и детальный текст, вертикальный вид;
  • картинка и основной текст;
  • картинка, основной и детальный текст, вертикальный вид;
  • картинка вверху, ниже основной и детальный текст.
• Ориентация (Orientation) — как будут отображаться элементы списка: вертикально или горизонтально. Имеет приоритет над предыдущей настройкой макета.
• Цвет выбора (SelectionColor) — цвет выбранного элемента.
• Цвет текста — цвет основного текста.
• Цвет детального текста (TextColorDetail) — цвет детального текста.
• Видимый — отображается ли компонент на макете.
• Эффект отскока (BounceEdgeEffect) — определяет визуальное поведение списка при достижении границ (верхней/нижней) при прокрутке. Если опция включена, когда пользователь прокручивает список до конца, появляется анимация «отскока» (мягкое подпрыгивание содержимого).
• Элементы из цепочки — используется для создания простого списка. Элементы добавляются через запятую, например: первый, второй, третий.
• Текст подсказки (HintText) — текст подсказки в строке поиска.
• Данные списка (ListData) — Используется для создания более разнообразного списка, с использованием картинок и детального текста. при клике на кнопку открывается окно наполнения элементов. Количество полей для заполнения зависит от выбранного макета отображения. Как выглядит окно наполнения для примера с картинки выше:

Предварительно потребуется загрузить в проект изображения, которые вы хотите добавить в список.

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

Блоки в программировании

• когда Список После Выбора — блок команд, что делать после того, как был выбран один из элементов списка. Значение выбранного элемента можно получить из опции «Выбор».

• вызов Список Добавить Элемент — добавление нового элемента в список. Доступны строки для наполнения полей основного, детального текста и название картинки. Элемент добавляется в конец списка.

• вызов Список Добавить Элемент в Индекс — добавление нового элемента в список по указанному индексу. Необходимо указать число (индекс). Также доступны строки для наполнения полей основного, детального текста и название картинки.

• вызов Список Добавить Элементы — добавление элементов в список. Значения передаются через другой список.

• вызов Список Добавить Элементы в Индекс — добавление элементов в список в определенный индекс. Значения передаются через другой список. Индекс задается числом.

• вызов Список Создать Элемент — добавление нового элемента в список. Доступны строки для наполнения полей основного, детального текста и название картинки. Элемент добавляется в конец списка. Отличается от аналогичной функции тем, что помимо добавления элемента создает словарь.

• вызов Список Получить Детальный Текст — получить детальный текст элемента списка. На вход подается словарь с элементом.

• вызов Список Получить Название Изображения — получить имя картинки элемента списка. На вход подается словарь с элементом.

• вызов Список Получить Основной Текст — получить основной текст элемента списка. На вход подается словарь с элементом.

• вызов Список Удалить Элемент по Индексу — удаляет элемент из списка по указанному индексу.
• Остальные блоки нужны для получения данных из настроек или изменения текущих настроек компонента:
  

Список в MIT App Inventor — это базовый, но крайне полезный компонент для организации данных в вашем приложении. Прост в использовании, но при этом достаточно гибкий для большинства стандартных задач.