Позиционный элемент с движком макета

UI Toolkit включает в себя движок макета, который располагает элементы на основе свойств макета и стиля. Движок макета использует принципы макета Yoga, который реализует подмножество Flexbox, системы макета HTML/CSS. Свойства UI Toolkit соответствуют поведению макета Yoga. UI Toolkit поддерживает большинство свойств в Flexbox.

По умолчанию все элементы являются частью макета. У макета есть следующие поведения по умолчанию:

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

UI Toolkit включает встроенные элементы управления для стандартных UI компонентов, таких как кнопки, переключатели или текстовые поля. Эти встроенные элементы управления имеют стили, которые влияют на их макет.

Основные свойства стиля

Ниже приведены основные свойства стиля:

• Flex > Направление (flex-direction в USS): Определяет направление расположения главная осьПо умолчанию column и это делает главная ось бежать сверху вниз.
• Гибкий > Растёт (flex-grow в USS): Определяет, насколько элемент растет относительно своих братьев вдоль главная ось. Значение — это соотношение, которое делится с братьями и сестрами в том же родительском контейнере. flex-grow: 1 на двух детей, каждый из них получит равную долю оставшегося пространства, но только если:
• Их значения flex-basis равны (или оба установлены на 0).
• Их первоначальные размеры (содержимое) не влияют на макет через flex-basis: auto.

Чтобы обеспечить равномерное разделение независимо от содержимого, установите flex-grow: 1 и flex-basis: 0. Это говорит движку макета игнорировать размер контента при распределении пространства. — Flex > Базовый (flex-basis в USS): Определяет начальные размеры элемента вдоль главная осьПо умолчанию auto, что означает, что размер основан на размере контента. Вы можете установить его на определенное значение, например 100px, или в 0 игнорировать размер содержимого. — Выравнивание > Выравнивание элементов (align-items в USS): Определяет выравнивание элементов в поперечная ось, либо перпендикулярной оси главная ось. Например, если у вас есть две кнопки в VisualElement которая имеет flex-direction: column и align-items: flex-end настроен, две Кнопки будут сжиматься к правому краю контейнера. align-items имеют имена, как flex-start и flex-end потому что они зависят от значения flex-direction. — Выравнивание > Выравнивание содержимого (justify-content в USS): Определяет выравнивание элементов в главная ось. Например, если у вас есть две кнопки в VisualElement которая имеет flex-direction: column и justify-content: flex-end настроен, две Кнопки сжимаются к нижнему краю контейнера. justify-content именуются как flex-start и flex-end потому что они зависят от значения flex-direction.

Дополнительные сведения см. в Гибкий макет.

Если выбранный элемент имеет дочерние элементы, в UI Builder, вы можете использовать переключатели в заголовке для переключения свойств стиля, связанных с flex, в окне Видовой проем. На изображении ниже показаны доступные параметры для элемента #menu:

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

UXML для этого макета, показывающий встроенные стили, установленные на каждом контейнере VisualElement, находится ниже:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="screen-is-blue" style="flex-grow: 1; justify-content: flex-end; background-color: blue;">
        <ui:VisualElement name="toolbar-is-orange" style="align-items: flex-end; background-color: orange;">
            <ui:Button text="Button" display-tooltip-when-elided="true" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

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

Абсолютное положение

UI Builder также поддерживает свойства стиля Позиция. Режим Position > Absolute делает элемент невидимым для модуля макета Flexbox по умолчанию. Это как если бы он больше не занимал никакого пространства. Absolute-position элементы появляются наверху любых элементов, которые являются Относительная-position.

При использовании Абсолютной позиции, вы можете использовать свойства стиля Position > Left, Top, Правый, Нижняя для смещения и изменения размера элемента от соответствующих краев его родительского элемента. Это не устанавливает абсолютные координаты на экране, но устанавливает смещение относительно родительского элемента. Вы все еще можете использовать Относительная режим для размещения родительского элемента. Если вы устанавливаете как Левый смещение, так и Правый смещение, свойство стиля Ширина элемента игнорируется, и вычисленная ширина теперь будет получена из следующей формулы:

element-computed-width = parent-width - left-offset - right-offset

Левый, Top, Правый, Нижняя также могут быть интерпретированы как якоря. Например, вы можете закрепить Button в левом нижнем углу экрана:

UXML ниже отображает встроенные стили:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement style="flex-grow: 1;">
        <ui:VisualElement style="position: absolute; left: 0; bottom: 0;" />
    </ui:VisualElement>
</ui:UXML>

С позиционированием существует разница между установкой Левый на 0 и отключением Левый:

• Left set to 0 означает установить смещение 0.
• Left unset не устанавливает никакого смещения и позволяет другим свойствам стиля определять ширину или высоту элемента.

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

• Если вы установите как свойства Левый, так и Правый, то обработчик обновит свойство Правый.
• Если вы установите Левый, но не Правый, то handler обновит свойство Ширина.

Использовать как относительные, так и абсолютные значения

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

Ниже показан пример простого центрированного всплывающего окна:

И вот UXML для вашей справки:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="complex-ui-screen">
        <ui:Toggle label="Toggle" />
        <ui:MinMaxSlider picking-mode="Ignore" label="Min/Max Slider" min-value="10" max-value="12" low-limit="-10" high-limit="40" />
        <ui:Label text="Label" />
        <ui:Button text="Button" />
        <ui:Button text="Button" />
    </ui:VisualElement>
    <ui:VisualElement name="overlay" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.71); align-items: center; justify-content: center;">
        <ui:VisualElement name="popup" style="background-color: rgba(70, 70, 70, 255);">
            <ui:Label text="Exit?" name="message" />
            <ui:Button text="OK" name="ok-button" style="width: 108.3333px;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

Приведенный выше пример показывает использование Абсолютные показатели положение. Установить все Позиция > Левый, Верхняя часть, Правый, Нижняя до 0, так что положение 0 пикселей от краев экрана. Это делает #overlay элемент перекрывают #complex-ui-screen Вы также можете установить полупрозрачный фон для элемента контейнера. #overlay элемент, чтобы сделать другой UI появляются темнее. Использование #overlay установить Относительная положение, чтобы центрировать наш #popup контейнер VisualElement.

Передовая практика

В следующем списке содержатся советы по повышению производительности механизма макета:

• Установите width и height для определения размера элемента.

• Используйте flexGrow свойства (USS: flex-grow: <value>;) для назначения элементу гибкого размера. Значение flexGrow свойство присваивает базовый вес размеру элемента, когда он определяется его родственниками.

• Установите свойство flexDirection на row (USS: flex-direction: row;) для переключения на горизонтальную схему.

• Используйте относительное позиционирование для смещения элемента на основе его первоначального положения в макете.

• Установите свойство position на absolute, чтобы разместить элемент относительно его родительского прямоугольника позиции. Это не влияет на расположение его братьев или родителя.

• Чтобы оформить свой пользовательский редактор UI, например, изготовленный на заказ Inspector, вы можете воспользоваться встроенными UI Toolkit компонентами и стилями. Рекомендуемый способ обеспечения правильного выравнивания и промежутков — это использовать BaseField элементы и применять .unity-base-field__aligned USS-класс. Он автоматически задаёт стандартный горизонтальный отступ между метками и элементами управления.

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

• USS ссылка на свойства
• USS общие свойства
• Стиль UI с USS
• Относительное и абсолютное позиционирование C# пример