Компонент ScrollView

Компонент ScrollView в библиотеке PlayCanvas предназначен для создания прокручиваемых контейнеров. Это полезный инструмент для реализации интерфейсов с большим количеством контента, когда невозможно отобразить все элементы на экране сразу. ScrollView предоставляет простой способ для реализации вертикальной и горизонтальной прокрутки, а также управления видимостью содержимого в ограниченной области.

Структура компонента

Компонент ScrollView состоит из нескольких частей:

  1. Контейнер прокрутки: Элемент, который определяет область видимости содержимого. Это может быть элемент пользовательского интерфейса или другой контейнер, в который будут помещены другие элементы.
  2. Содержимое: Элементы, которые могут выходить за пределы области видимости и требуют прокрутки. Содержимое может быть различным — текстовые блоки, изображения или другие интерфейсные элементы.
  3. Полосы прокрутки: Эти элементы отображаются, если содержимое превышает размеры контейнера. Они позволяют пользователю прокручивать содержимое по горизонтали или вертикали.

Инициализация и настройка ScrollView

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

// Создание элемента для ScrollView
var scrollViewEntity = new pc.Entity();

// Добавление компонента ScrollView
scrollViewEntity.addComponent('scrollview', {
    horizontal: true,  // Включение горизонтальной прокрутки
    vertical: true,    // Включение вертикальной прокрутки
    scrollSpeed: 0.1   // Скорость прокрутки
});

Здесь:

  • horizontal и vertical задают, будут ли доступны полосы прокрутки по горизонтали и вертикали.
  • scrollSpeed регулирует скорость прокрутки при движении.

Взаимодействие с содержимым

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

Для задания содержимого можно использовать другие элементы PlayCanvas. Например, если нужно поместить текст или другие интерфейсные элементы в ScrollView, можно создать дочерние элементы и поместить их внутрь контейнера.

var contentEntity = new pc.Entity();
contentEntity.addComponent('element', {
    type: 'image',
    anchor: new pc.Vec4(0, 0, 1, 1)
});
scrollViewEntity.addChild(contentEntity);

Управление прокруткой

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

Программная прокрутка

Чтобы прокручивать содержимое программно, можно использовать методы компонента ScrollView:

  • scrollTo(x, y): Прокручивает содержимое до заданной позиции по осям X и Y.
scrollViewEntity.scrollview.scrollTo(0, 0.5);  // Прокрутка до середины по вертикали
  • scrollBy(x, y): Прокручивает содержимое на заданное расстояние.
scrollViewEntity.scrollview.scrollBy(0, 0.1);  // Прокрутка на 10% от высоты контейнера

События прокрутки

Компонент ScrollView генерирует несколько событий, которые могут быть использованы для обработки пользовательского ввода или выполнения логики в ответ на прокрутку.

  • scrollstart: Срабатывает, когда начинается прокрутка.
  • scrollend: Срабатывает, когда прокрутка завершена.
  • scroll: Срабатывает на каждом шаге прокрутки.
scrollViewEntity.scrollview.on('scrollstart', function (event) {
    console.log('Прокрутка началась');
});

scrollViewEntity.scrollview.on('scroll', function (event) {
    console.log('Прокрутка продолжается');
});

Пример использования ScrollView

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

var scrollViewEntity = new pc.Entity();
scrollViewEntity.addComponent('scrollview', {
    vertical: true,
    scrollSpeed: 0.2
});

// Создание контейнера для изображений
var contentEntity = new pc.Entity();
contentEntity.addComponent('element', {
    type: 'image',
    width: 200,
    height: 200,
    pivot: new pc.Vec2(0.5, 0.5),
    anchor: new pc.Vec4(0, 0, 1, 0)
});

// Добавление изображений
for (var i = 0; i < 10; i++) {
    var imageEntity = new pc.Entity();
    imageEntity.addComponent('element', {
        type: 'image',
        width: 200,
        height: 200,
        texture: app.assets.find('image' + i).resource  // Добавление изображений
    });
    contentEntity.addChild(imageEntity);
}

// Помещение контейнера в ScrollView
scrollViewEntity.addChild(contentEntity);

Настройка полос прокрутки

PlayCanvas позволяет также настраивать отображение полос прокрутки. Можно скрыть или изменить их стиль в зависимости от состояния прокрутки.

Для этого можно использовать стили CSS, если проект взаимодействует с HTML, или настроить графику для полос прокрутки, если они используются в 3D-пространстве.

Советы по производительности

При использовании компонента ScrollView важно следить за производительностью, особенно если содержимое прокручиваемого контейнера включает сложные элементы, такие как анимации или изображения высокого разрешения. Рекомендуется использовать оптимизацию рендеринга, например, динамическую загрузку контента или использование текстур меньшего размера для повышения производительности при прокрутке.

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

Заключение

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

Оглавление