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

Карусель

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

Добавление виджета карусели​

Чтобы добавить виджет карусели в ваше приложение:

  1. Добавьте виджет Карусель из вкладки Элементы макета.
  2. По умолчанию он добавляет четыре слайда и показывает первый из них на холсте. В дереве виджетов он представлен как Страница карусели. Чтобы увидеть другой слайд на холсте, перейдите к Панели свойств > установите Активную страницу на слайд, который вы хотите увидеть.
  3. Чтобы добавить новый слайд, перейдите к Панели свойств > Активная страница > нажмите + Добавить страницу.
  4. Чтобы удалить любой слайд, выберите Страницу карусели из дерева виджетов или области холста и нажмите клавишу Delete на клавиатуре.
  5. По умолчанию страница карусели содержит виджет Изображение; однако вы можете настроить его в соответствии с вашими потребностями.

Настройка​

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

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

По умолчанию карусель поставляется с горизонтальной прокруткой слайдов. Чтобы изменить направление прокрутки на вертикальное, перейдите к Панели свойств > Свойства карусели > установите Ось в значение Вертикаль.

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

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

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

  1. Выберите виджет из дерева виджетов или области холста.
  2. Выберите Действия из панели свойств (правое меню) и нажмите + Добавить действие.
  3. Вы заметите, что Тип действия (также называемый обратный вызов) уже установлен на При изменении страницы. Это означает, что добавленные здесь действия будут вызываться каждый раз при свайпе слайда.
  4. Теперь вы можете добавить здесь любое действие.

Вот пример, демонстрирующий сообщение Snackbar при свайпе слайда.

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

Возможно, вы захотите отобразить определенный слайд сразу после его загрузки. Для этого перейдите к Панели свойств > Свойства карусели > введите значение Индекс начальной страницы. Пожалуйста, обратите внимание, что индекс слайда начинается с 0. Так что если вы хотите установить слайд 1, вам следует ввести 0. Если вы хотите установить слайд 2, вам следует ввести 1 и так далее.

установить-начальный-индекс

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

По умолчанию содержимое карусели циклически повторяется. Чтобы остановить это поведение, перейдите к панели свойств > Свойства карусели > отключите Циклическое повторение содержимого карусели.

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

Если вы хотите, чтобы все элементы были расположены по центру, перейдите к панели свойств > Свойства карусели > включите Обернуть элементы в центральный виджет.

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

Изменение размера области просмотра и коэффициента уменьшения​

Вы можете использовать Доля просмотра для изменения размера одного элемента, то есть элемента в центре. Коэффициент уменьшения позволяет вам регулировать размер других элементов, то есть элементов, которые не находятся в фокусе. Оба свойства принимают значения от 0 до 1, где 1 - это полный размер, а 0,5 - половина фактического размера.

Включение автоматического воспроизведения​

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

  • Продолжительность: Время (в миллисекундах), через которое происходит переход от текущего слайда к следующему.
  • Задержка: Время (в миллисекундах), которое элемент остается в центре, прежде чем перейти к следующему.

Изменение слайда при нажатии на кнопку​

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

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

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

Действие Управление каруселью​

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

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