Вступление

Scroll ListВиджет является прокручиваемым меню , состоящим из (большого) количества элементов и (меньше) числа виджетов, которые динамически обновляются , как они прокручиваются в поле зрения. Scroll ListТакже способен вызывать обратные вызовы при взаимодействии с элементами в Scroll List.

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

• Контейнеры и пользовательские контейнеры  объясняют , как создавать и добавлять контент для обоего  Container и  Custom Container. 
•  Код, сгенерированный дизайнером, описывает, как создать пользовательский код, который взаимодействует с кодом, сгенерированным конструктором TouchGFX. 

Важные свойства

использование

Элементы в  Scroll List основаны на концепции под названием « Шаблон элемента»,  которая  Custom Container служит основой для графических элементов для элементов в  Scroll List.

Перед созданием  Scroll List, Custom Containerдолжен быть создан , чтобы иметь Item Шаблон  для прокручивания списка.

Ниже показан пример элемента, Custom Containerкоторый будет использоваться в качестве шаблона элемента  в этой статье. Custom ContainerСостоит из фона и какой - нибудь текст, который показывает индекс элемента, указывающий , где он находится в списке.

Custom Container используется в качестве шаблона элемента .

После того , как создал  может быть выбран под свойство Item шаблона. Выбор результатов в  изменениях размера для соответствия со свойством размера, который не в направлении прокрутки (ширина для вертикальных s и высота для горизонтальных s) выбранного  .Scroll ListCustom ContainerCustom ContainerScroll List Scroll ListScroll ListCustom Container

Изменение свойства другого размера (высота по вертикали и ширина по горизонтали) определяет количество видимых элементов. На изображении ниже показан симулятор, на котором запущено приложение с  Scroll List четырьмя видимыми элементами на основе шаблона элемента, созданного ранее.

Симулятор запускает приложение на Scroll Listоснове ранее созданного шаблона элемента .

Расстояние между элементами обусловлено  свойством «  Внешний вид списка» Item Margin, для которого  установлено значение 5 пикселей, с полями по 5 пикселей с каждой стороны каждого элемента, в результате чего пространство между элементами составляет 10 пикселей. Все элементы в списке отображают 0 в качестве значения по умолчанию, поскольку не было добавлено никакой логики для обновления элементов элементов в списке.

Код пользователя для Scroll List

После установки графических элементов Scroll List и их свойств необходимо создать код пользователя для обновления элементов в Scroll List. Заголовочный файл для ScreenViewBaseкласса, который генерируется TouchGFX Designer, показан ниже.

ScreenViewBase.hpp

class ScreenViewBase : public touchgfx::View { public: ScreenViewBase(); virtual ~ScreenViewBase() {} virtual void setupScreen(); virtual void scrollListUpdateItem(CustomContainer& item, int16_t itemIndex) { // Override and implement this function in Screen } protected: FrontendApplication& application() { return *static_cast<FrontendApplication*>(Application::getInstance()); } touchgfx::BoxWithBorder boxWithBorder; touchgfx::ScrollList scrollList; touchgfx::DrawableListItems<CustomContainer, 6> scrollListListItems; private: void updateItemCallbackHandler(DrawableListItemsInterface* items, int16_t containerIndex, int16_t itemIndex); touchgfx::Callback<ScreenViewBase, DrawableListItemsInterface*, int16_t, int16_t> updateItemCallback; };

Когда TouchGFX Designer генерирует код для Scroll List, создается функция scrollListUpdateItem, помеченная зеленым, которую пользователь может переопределить и использовать для обновления элементов в Scroll List. Функция вызывается каждый раз, когда Scroll List требуется обновить элемент , тем самым гарантируя, что элемент обновляется до того, как он становится видимым. scrollListUpdateItemИмеет два параметра, который используется для идентификации элемента обновляется и обновить его. Параметр itemIndex содержит значение индекса элемента, которое используется для определения того, какой элемент обновляется. Элемент параметра является ссылкой на пользовательский контейнер, который является видимым элементом в  Scroll List. Обновление графики для элемента параметра приводит к обновлению графики для видимого элемента в  Scroll List.

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

Интеграция scrollListUpdateItem в файлы кода пользователя ScreenView.hppи ScreenView.cppпоказана ниже.

ScreenView.hpp

#ifndef SCREEN_VIEW_HPP #define SCREEN_VIEW_HPP #include <gui_generated/screen_screen/ScreenViewBase.hpp> #include <gui/screen_screen/ScreenPresenter.hpp> class ScreenView : public ScreenViewBase { public: ScreenView(); virtual ~ScreenView() {} virtual void setupScreen(); virtual void tearDownScreen(); virtual void scrollListUpdateItem(CustomContainer& item, int16_t itemIndex); protected: }; #endif // SCREEN_VIEW_HP

ScreenView.cpp

#include <gui/screen_screen/ScreenView.hpp> ScreenView::ScreenView() { } void ScreenView::setupScreen() { ScreenViewBase::setupScreen(); } void ScreenView::tearDownScreen() { ScreenViewBase::tearDownScreen(); } void ScreenView::scrollListUpdateItem(CustomContainer& item, int16_t itemIndex) { item.setValue(itemIndex); }

В функция ovridden и реализуется .ScreenView.hppscrollListUpdateItemScreenView.cpp

Цель списка прокрутки, созданного в TouchGFX Designer, состоит в том, чтобы обновить текст в шаблоне элемента, указав значение индекса видимых элементов. Поскольку шаблон элемента основан на Custom Container, для него создается функция setValue  Custom Container. Функция setValue может принимать параметр itemIndex и обновлять текст в шаблоне элемента.

Вызов setvalue для элемента параметра приведет к тому, что элементы обновят свой внешний вид и отобразят значение индекса.

Снимок экрана симулятора, на котором запущено приложение на Scroll Listоснове ранее созданного шаблона элемента в сочетании с кодом пользователя.

Значение индекса для элементов Scroll Listтеперь показывает значение индекса элементов, а при прокрутке значения в элементах изменяются.

Callbacks

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

Scroll List имеет три обратных вызова, которые вызываются на основе различных взаимодействий с Scroll List. Три обратных вызова: «Нажатие элемента», «Выбор элемента» и «Анимация завершена».

Обратный вызов Item Pressed вызывается при каждом Scroll Listнажатии элемента в . Когда обратный вызов вызывается, целое число со значением индекса нажатого элемента передается в функцию-обработчик.

Обратный вызов Item Selected вызывается при щелчке элемента без перемещения Scroll List. Подобно нажатию на элемент, обратный вызов Item Selected передает целое число со значением индекса элемента в функцию-обработчик при вызове.

Анимация завершена, обратный вызов вызывается каждый раз, когда Scroll Listанимация останавливается.