Перейти к основному содержимому

Карусель

Виджет Carousel, часто называемый слайдером изображений, представляет собой популярный элемент дизайна, используемый для отображения последовательности изображений или контента в горизонтальном или иногда вертикальном формате. Основная цель слайдера карусели — продемонстрировать несколько фрагментов информации, таких как изображения, характеристики продукта, статьи новостей или отзывы, в ограниченном пространстве экрана.

Чтобы добавить виджет Carousel в приложение:

  1. Добавьте виджет Carousel из вкладки Layout Elements.
  2. По умолчанию добавляется четыре слайда, и в холсте отображается первый из них. В дереве виджетов он представлен как Carousel Page. Чтобы увидеть другой слайд в холсте, перейдите в Properties Panel > и установите Active Page в нужный слайд.
  3. Чтобы добавить новый слайд, перейдите в Properties Panel > Active Page > и нажмите + Add Page.
  4. Чтобы удалить любой слайд, выберите Carousel Page в дереве виджетов или области холста и нажмите клавишу Delete на клавиатуре.
  5. По умолчанию Carousel Page содержит виджет Image; однако вы можете настроить его в соответствии с вашими требованиями.

Настройка​

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

Изменение направления прокрутки​

По умолчанию в Carousel используется горизонтальная прокрутка для слайдов. Чтобы изменить направление прокрутки на вертикальное, перейдите в Properties Panel > Carousel Properties > и установите Axis в значение Vertical.

Запуск действия при смене слайда​

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

Чтобы запустить действие при смене страницы или слайда:

  1. Выберите виджет в дереве виджетов или области холста.
  2. Выберите Actions в панели свойств (правое меню) и нажмите + Add Action.
  3. Вы заметите, что Type of Action (он же callback) уже установлен в On Page Change. Это означает, что действия, добавленные здесь, будут вызываться при каждом свайпе слайда.
  4. Теперь вы можете добавить любое действие.

Вот пример, показывающий сообщение в snackbar при каждом свайпе слайда.

Установка начального индекса страницы​

Возможно, вы захотите отобразить определенный слайд сразу после загрузки. Для этого перейдите в Properties Panel > Carousel Properties > и введите значение Initial Page Index. Обратите внимание, что индекс слайда начинается с 0. Таким образом, если вы хотите установить слайд 1, введите 0. Если слайд 2 — введите 1 и так далее.

set-initial-index

Циклическая прокрутка содержимого карусели​

По умолчанию содержимое карусели циклически повторяется. Чтобы отключить это поведение, перейдите в properties panel > Carousel Properties > и отключите Loop carousel contents.

Обертывание элементов в центральный виджет​

Если вы хотите разместить все элементы в центральной позиции, перейдите в properties panel > Carousel Properties > и включите Wrap items in Center Widget.

wrap-items-in-center-widget

Изменение Viewport и Shrink factor​

Вы можете использовать Viewport Fraction для изменения размера одного элемента, то есть элемента в центре. Shrink Factor позволяет настроить размер других элементов, то есть тех, которые не в фокусе. Оба свойства принимают значения от 0 до 1, где 1 — полный размер, а 0.5 — половина от фактического размера.

Включение автопроигрывания​

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

  • Duration: Время (в миллисекундах), необходимое для перехода с текущего слайда на следующий.
  • Delay: Время (в миллисекундах), в течение которого элемент остается в центре перед переходом к следующему.

Смена слайда по нажатию кнопки​

Возможно, вы захотите разрешить пользователям менять слайд по нажатию кнопки (например, кнопки «следующий», «предыдущий» и «пропустить») в дополнение к свайпу. Для этого добавьте действие Control Carousel на событие Tap виджета Button.

Вот как это сделать:

  1. Сначала добавьте виджет Carousel.
  2. Добавьте кнопки для перехода к предыдущей и следующей страницам.
  3. Теперь выберите любую кнопку и определите действие Control Carousel.

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

Типы действий​

Это типы действий, которые вы можете добавить для виджета Carousel.

  • Previous: Прокрутка к предыдущему слайду.
  • Next: Прокрутка к следующему слайду.
  • First: Прокрутка к первому слайду.
  • Last: Прокрутка к последнему слайду.
  • Jump to: Прокрутка к конкретному слайду в виджете Carousel. Обратите внимание, что индекс слайда начинается с 0. Таким образом, если вы хотите перейти к слайду 1, введите 0. Если к слайду 2 — введите 1 и так далее.