ScrollView

ScrollView отображает свое содержимое внутри прокручиваемой области. Когда вы добавляете содержимое в ScrollView, содержимое добавляется в контейнер содержимого (#unity-content-container) ScrollView.

Создать ScrollView

Вы можете создать ScrollView с помощью UI Builder, UXML или C#. Следующий пример C# создает ScrollView с возможностью горизонтальной и вертикальной прокрутки, который содержит метку заголовка и ряд элементов переключения. Он также добавляет кнопку, которая при нажатии прокручивает список на одну страницу вниз с помощью вертикальной прокрутки.

// Create a ScrollView with vertical and horizontal scrolling enabled
// and set its width and height.
var scrollView = new ScrollView(ScrollViewMode.VerticalAndHorizontal);
scrollView.style.width = 250;
scrollView.style.height = 400;

// Add a label and 100 toggle elements to the ScrollView.
scrollView.Add(new Label("List of checkboxes:"));

for (int i = 0; i < 100; ++i)
{
    var toggle = new UnityEngine.UIElements.Toggle()
    { text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." };
    scrollView.Add(toggle);
}

// Access the vertical scroller.
var verticalScroller = scrollView.verticalScroller;

// Add a button to scroll down one page when clicked.
var scrollDownButton = new Button(() =>
{
    verticalScroller.ScrollPageDown(50f);
})
{ text = "Scroll Down One Page" };

uiDocument.rootVisualElement.Add(scrollView);
uiDocument.rootVisualElement.Add(scrollDownButton);

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

Можно указать режим прокрутки движения строки прокрутки, видны ли горизонтальные или вертикальные строки прокрутки, а также управлять скоростью строк прокрутки.

Режим и видимость панели прокрутки

Чтобы установить режим прокрутки движения строки прокрутки в UI Builder, в окне Inspector ScrollView выберите один из следующих вариантов для Режим:

• Вертикальный (по умолчанию)
• Горизонтальный
• Вертикальный и горизонтальный

Чтобы установить видимость строки прокрутки в UI Builder, в окне Inspector ScrollView выберите один из следующих параметров для Видимость горизонтальной прокрутки или Видимость вертикальной прокрутки:

• Авто (по умолчанию)
• Всегда видимый
• Скрытые

Контроль скорости прокрутки

Чтобы управлять скоростью прокрутки, настройте значения следующих свойств в коде UI Builder, UXML или C#. Чем выше значение, тем выше скорость прокрутки.

• horizontal-page-size управляет скоростью горизонтальной прокрутки при использовании клавиатуры или экранных кнопок прокрутки (стрелок и ручки). Скорость рассчитывается путем умножения размера страницы на указанное значение. Например, значение 2 означает, что каждое движение прокрутки покрывает расстояние, вдвое превышающее ширину страницы.
• vertical-page-size управляет скоростью вертикальной прокрутки при использовании клавиатуры или экранных кнопок прокрутки (стрелок и ручки). Скорость рассчитывается путем умножения размера страницы на указанное значение. Например, значение 2 означает, что каждое движение прокрутки покрывает расстояние, вдвое превышающее длину страницы.
• mouse-wheel-scroll-size управляет скоростью прокрутки при использовании колеса мыши. Скорость рассчитывается путем деления указанного значения на 18, что соответствует высоте строки по умолчанию 18px. Например, если вы установите значение 36, то каждое движение прокрутки покроет расстояние, эквивалентное двум строкам содержимого.

Примечание: вы также можете переопределить Встроенная переменная USS –unity-metrics-single_line-height для управления скоростью прокрутки при использовании колеса мыши. mouse-wheel-scroll-size атрибут имеет приоритет над –unity-metrics-single_line-height Переменная USS.

Прокрутить до конца

Чтобы прокрутить до конца ScrollView, установите свойство scrollOffset на максимальное значение вертикального прокрутчика. Это прокрутит содержимое до конца при инициализации UI.

// Set the scroll offset to the bottom of the ScrollView.
// This scrolls to the bottom when the UI is initialized.
scrollView.scrollOffset = new Vector2(0, scrollView.verticalScroller.highValue);

Оберните элементы внутри ScrollView

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

Чтобы обернуть визуальные элементы внутри ScrollView, установите контейнер содержимого flex-direction ScrollView на row и flex-wrap на wrap.

В USS:

.unity-scroll-view__content-container {
    flex-direction: row;
    flex-wrap: wrap;
}

В C#:

scrollview.contentContainer.style.flexDirection = FlexDirection.Row;
scrollview.contentContainer.style.flexWrap = Wrap.Wrap;

Обращение текста элементов внутри ScrollView

Чтобы перенести текст элемента внутрь ScrollView, например, текст элемента Label, выполните следующие действия:

1. Стиль элемента Метка с помощью любого из следующих методов:
   • В UI Builder, в окне Inspector метки, выберите Текст > Обращение > обычный.
   • Примените стиль white-space: normal; к элементу Label в USS, UXML или C#.
2. Создайте VisualElement в качестве контейнера внутри ScrollView. Оригинальный элемент контейнера внутри ScrollView не имеет набора границ (бесконечный по размеру), поэтому текст не будет правильно переворачиваться. Этот контейнер VisualElement обеспечивает конечный размер для текста, который будет переворачиваться внутри.
3. Добавить метку в контейнер VisualElement.

Применить стили к прямому дочернему объекту ScrollView

Когда вы добавляете элементы в ScrollView, они добавляются под дочерним элементом ScrollView, который выступает в качестве контейнера. Чтобы добавить стиль в этот контейнер, выполните следующее в USS:

ScrollView > .unity-scroll-view__content-container {
    margin: 10px;
}

Примеры

• Обращение содержимого внутри ScrollView: В этом примере показано, как использовать стили для обращения содержимого внутри прокручиваемого представления.

Класс C# и пространство имён

C# класс: ScrollView
Пространство имен: UnityEngine.UIElements
Базовый класс: VisualElement

Атрибуты члена UXML

Этот элемент имеет следующие атрибуты члена:

Имя	Тип	Описание
elastic-animation-interval-ms	long	Минимальное время, в миллисекундах, между выполнениями анимации эластичной пружины.
elasticity	float	Степень эластичности, используемая при попытке пользователя прокрутить страницу за пределы представления прокрутки. Эластичность используется только в том случае, если touchScrollBehavior установлено на Elastic.
horizontal-page-size	float	Это свойство управляет скоростью горизонтальной прокрутки при использовании клавиатуры или экранных кнопок прокрутки (стрелок и ручки), в зависимости от размера страницы. При прокрутке размер страницы применяется к смещению для каждого шага прокрутки, так что окончательное смещение будет равняться размеру страницы, умноженному на количество шагов.\
horizontal-scroller-visibility	UIElements.ScrollerVisibility	Указывает, видима ли горизонтальная полоса прокрутки.
mode	UIElements.ScrollViewMode	Управляет тем, как ScrollView позволяет пользователю прокручивать содержимое. ScrollViewMode По умолчанию ScrollViewMode.Vertical. Запись в это свойство изменяет список классов ScrollView в соответствии с указанным значением ScrollViewMode. При изменении значения список классов, соответствующий старому значению, удаляется, а список классов, соответствующий новому значению, добавляется.
mouse-wheel-scroll-size	float	Это свойство управляет скоростью прокрутки только при использовании колеса мыши, в зависимости от размера страницы. Это свойство имеет приоритет над переменной --unity-metrics-single_line-height USS. Если установлены и свойство, и переменная, используется значение свойства. В следующем примере показано, как использовать свойство mouseWheelScrollSize для управления «скоростью» прокрутки при использовании колеса мыши. Обратите внимание на разницу в ощущениях при выборе различных значений:
nested-interaction-kind	UIElements.ScrollView.NestedInteractionKind	Поведение, которое должно использоваться, когда прокрутка достигает пределов вложенного ScrollView.
scroll-deceleration-rate	float	Управляет скоростью, с которой движение прокрутки замедляется после прокрутки пользователем с помощью сенсорного взаимодействия. Скорость замедления — это скорость снижения в секунду. Значение 0.5 вдвое снижает скорость каждую секунду. Значение 0 немедленно останавливает прокрутку.
show-horizontal-scroller	boolean	Вместо этого используйте ScrollView.horizontalScrollerVisibility.
show-vertical-scroller	boolean	Вместо этого используйте ScrollView.verticalScrollerVisibility.
touch-scroll-type	UIElements.ScrollView.TouchScrollBehavior	Поведение, используемое при попытке пользователя прокрутить за пределы содержимого ScrollView с помощью касания.
vertical-page-size	float	Это свойство управляет скоростью вертикальной прокрутки при использовании клавиатуры или экранных кнопок прокрутки (стрелок и ручки), в зависимости от размера страницы. Скорость рассчитывается путем умножения размера страницы на указанное значение. Например, значение 2 означает, что каждое движение прокрутки покрывает расстояние, вдвое превышающее ширину страницы.\
vertical-scroller-visibility	UIElements.ScrollerVisibility	Указывает, видима ли вертикальная полоса прокрутки.

Унаследованные атрибуты UXML

Этот элемент наследует от своего базового класса следующие атрибуты:

Имя	Тип	Описание
focusable	boolean	Если false, то элемент не может быть фокусирован. Элемент может быть фокусирован только в том случае, если его свойство canGrabFocus имеет значение true.
tabindex	int	Целое число, используемое для сортировки фокусируемых элементов в кольце фокуса. Должно быть больше или равно нулю. Установка значения tabIndex меньше 0 (например, −1) удаляет элемент из кольца фокуса и навигации по вкладкам.

Этот элемент также наследует следующие атрибуты от VisualElement:

Имя	Тип	Описание
content-container	string	Логический контейнер, в который добавляются дочерние элементы. Если к этому элементу добавляется дочерний элемент, то он добавляется в контейнер содержимого этого элемента. При итерации над VisualElement.Children При использовании элемента вместо самого элемента используется иерархия контейнера содержимого элемента. Это может привести к неожиданным результатам, например, к игнорированию элементов событиями навигации, если они не находятся непосредственно в иерархической структуре контейнера. См. IFocusRing для больше информации. Если контейнер содержимого совпадает с самим элементом, то дочерние элементы добавляются непосредственно к элементу. Это верно для большинства элементов, но может быть переопределено более сложными типами. ScrollView, например, имеет контейнер содержимого, отличающийся от самого себя. В этом случае дочерние элементы, добавленные к представлению прокрутки, добавляются вместо этого к его элементу контейнера содержа-VisualElement.Hierarchy.parent) дочерних элементов является элементом контейнера содержимого прокрутки, их логическим родителем (VisualElement.parentПоскольку некоторые фокусируемые дочерние объекты представления прокрутки не являются частью его логической иерархии, такие как его Scroller элементов, эти фокусируемые дочерние элементы не рассматриваются по умолчанию при использовании последовательной навигации. Как я могу изменить, какой элемент будет фокусироваться дальше для примера решения, если правила навигации по умолчанию не соответствуют вашим потребностям.
data-source	Object	Назначает источник данных этому VisualElement, который переопределяет любой унаследованный источник данных. Этот источник данных наследуется всеми дочерними объектами.
data-source-path	string	Путь от источника данных к значению.
data-source-type	System.Type	Возможный тип источника данных, присваиваемый этому VisualElement. Эта информация используется UI Builder только как подсказка для определенного заполнения поля пути источника данных, когда эффективный источник данных не может быть указан во время проектирования.
enabled	boolean	Возвращает true, если VisualElement разрешен локально. Этот флаг не изменяется, если VisualElement имплицитно отключен одним из родителей. Чтобы проверить это, используйте enabledInHierarchy.
language-direction	UIElements.LanguageDirection	Указывает направленность текста элемента. Значение будет распространяться на дочерей элемента. Установка languageDirection на RTL может получить только базовую поддержку RTL, такую как инверсия текста. Чтобы получить более полную поддержку RTL, такую как перерыв строки, перенос слов или формирование текста, вы должны включить Усовершенствованный текстовый генератор.
name	string	Имя этого VisualElement. Используйте это свойство для написания селекторов USS, которые нацелены на определенный элемент. Стандартная практика заключается в том, чтобы дать элементу уникальное имя.
picking-mode	UIElements.PickingMode	Определяет, может ли этот элемент быть целью событий указателя или выбран IPanel.Pick запросов. Элементы не могут быть выбраны, если: - Они невидимы. style.display установлен на DisplayStyle.None Элементы с режимом подбора PickingMode.Ignore никогда не получать псевдо-state.
style	string	Задает значения стиля на VisualElement. Возвращаемые данные стиля, рассчитанные из USS файлы или встроенные стили, записанные в этот объект в C#, не представляет полностью разрешенные стили, такие как окончательная высота и ширина VisualElement. Чтобы получить доступ к этим полностью разрешенным стилям, используйте resolvedStyle. Дополнительные сведения об использовании этого свойства и всех поддерживаемых USS свойства, см. Применить стили в C# сценарии и USS ссылка на свойства страницы руководства.
tooltip	string	Текст, который будет отображаться внутри информационного поля после того, как пользователь задержится над элементом небольшое время. Это поддерживается только в Редакторе UI.
usage-hints	UIElements.UsageHints	Комбинация значений подсказки, которые указывают высокоуровневые предполагаемые схемы использования для VisualElement. Это свойство может быть установлено только тогда, когда VisualElement еще не является частью Panel. Как только оно становится частью Panel, это свойство становится эффективно только для чтения, и попытки изменить его будут вызывать исключение. Указание правильного UsageHints заставляет систему принимать более правильные решения о том, как обрабатывать или ускорять определенные операции на основе предполагаемой схемы использования. Обратите внимание, что эти подсказки не влияют на поведение или визуальные результаты, а только влияют на общую производительность панели и элементов внутри нее. Рекомендуется всегда рассматривать возможность указания правильного UsageHints, но помните, что некоторые UsageHints могут быть внутренне проигнорированы при определенных условиях (e.g. из-за аппаратных ограничений на целевой платформе).
view-data-key	string	Используется для устойчивости данных представления, таких как развернутые состояния дерева, положение прокрутки или уровень масштаба. Этот ключ используется для сохранения и загрузки данных представления из хранилища данных представления. Если этот ключ не установлен, устойчивость отключена для связанного VisualElement. Дополнительные сведения см. в разделе Устойчивость данных представления в руководстве Unity.

Классы USS

В таблице ниже перечислены все открытые имена свойств C# и связанные с ними селекторы USS.

C# собственность	USS выбор	Описание
ussClassName	.unity-scroll-view	Имя USS-класса для элементов этого типа.
viewportUssClassName	.unity-scroll-view__content-viewport	Имя USS-класса для элементов области просмотра в элементах этого типа.
horizontalVariantViewportUssClassName	.unity-scroll-view__content-viewport--horizontal	Имя USS-класса, добавляемое, когда Viewport работает в горизонтальном режиме. ScrollViewMode.Horizontal
verticalVariantViewportUssClassName	.unity-scroll-view__content-viewport--vertical	Имя USS-класса, добавляемое, когда Viewport работает в вертикальном режиме. ScrollViewMode.Vertical
verticalHorizontalVariantViewportUssClassName	.unity-scroll-view__content-viewport--vertical-horizontal	Имя USS-класса, добавляемое, когда Viewport работает одновременно в горизонтальном и вертикальном режиме. ScrollViewMode.VerticalAndHorizontal
contentAndVerticalScrollUssClassName	.unity-scroll-view__content-and-vertical-scroll-container	Имя USS-класса для элементов содержимого в элементах этого типа.
contentUssClassName	.unity-scroll-view__content-container	Имя USS-класса для элементов содержимого в элементах этого типа.
horizontalVariantContentUssClassName	.unity-scroll-view__content-container--horizontal	Имя USS-класса, добавляемое, когда ContentContainer работает в горизонтальном режиме. ScrollViewMode.Horizontal
verticalVariantContentUssClassName	.unity-scroll-view__content-container--vertical	Имя USS-класса, добавляемое, когда ContentContainer работает в вертикальном режиме. ScrollViewMode.Vertical
verticalHorizontalVariantContentUssClassName	.unity-scroll-view__content-container--vertical-horizontal	Имя USS-класса, добавляемое, когда ContentContainer работает одновременно в горизонтальном и вертикальном режиме. ScrollViewMode.VerticalAndHorizontal
hScrollerUssClassName	.unity-scroll-view__horizontal-scroller	Имя USS-класса для горизонтальных полос прокрутки в элементах этого типа.
vScrollerUssClassName	.unity-scroll-view__vertical-scroller	Имя USS-класса для вертикальных полос прокрутки в элементах этого типа.
horizontalVariantUssClassName	.unity-scroll-view--horizontal	Имя USS-класса, добавляемое, когда ScrollView работает в горизонтальном режиме. ScrollViewMode.Horizontal
verticalVariantUssClassName	.unity-scroll-view--vertical	Имя USS-класса, добавляемое, когда ScrollView работает в вертикальном режиме. ScrollViewMode.Vertical
verticalHorizontalVariantUssClassName	.unity-scroll-view--vertical-horizontal	Имя USS-класса, добавляемое, когда ScrollView работает одновременно в горизонтальном и вертикальном режиме. ScrollViewMode.VerticalAndHorizontal
scrollVariantUssClassName	.unity-scroll-view--scroll
disabledUssClassName	.unity-disabled	Имя USS-класса для локально отключённых элементов.

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

Дополнительные ресурсы

• ListView
• Скроллер