Unity 6.3
0 онлайн 36 гостей 3 в системе
Вход
← Руководство

Создание пользовательской привязки для привязки селекторов USS

Версия: 2023.2+

В этом примере показано, как создать пользовательскую привязку, которая привязывает селектор USS к визуальному элементу.

Примерный обзор

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

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

Создание пользовательского типа привязки

Создайте пользовательский тип привязки, который назначает классы USS на основе индекса родственника. Привязка обновляется только при изменении индекса родственника.

  1. Создайте проект в Unity с любым шаблоном.

  2. В папке Assets вашего проекта создайте скрипт C# с именем AddMenuUSSClass.cs со следующим содержанием:

    using UnityEngine.UIElements;
    
[UxmlObject]
public partial class AddMenuUssClass : CustomBinding
{
    protected override BindingResult Update(in BindingContext context)
    {
        // Assign USS classes based on the sibling index. The binding updates when the sibling index changes.
        var element = context.targetElement;
        var index = element.parent.IndexOf(element);
        element.EnableInClassList("menu-button--first", index == 0);
        element.EnableInClassList("menu-button--last", index == element.parent.childCount - 1);                
            
        return new BindingResult(BindingStatus.Success);
    }
}

Создать UI и привязку

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

  1. В папке Assets вашего проекта создайте файл USS с именем CustomBinding.uss со следующим содержимым:

    .menu-button {
    flex-direction: row;
    height: 64px;
    align-items: center; 
    justify-content: center;
}
    
.menu-button--first {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-left-width: 2px;
}
    
.menu-button--last {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-right-width: 2px;
}
    
Button {
    margin: 0px;
    border-color: red;
}

  2. В папке Assets вашего проекта создайте файл UXML с именем CustomBinding.uxml со следующим содержимым:

    <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="True">
    <ui:VisualElement class="menu-button">
        <ui:Button text="Bloub">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
        <ui:Button text="Bip">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
        <ui:Button text="Boop">
            <Bindings>
                <AddMenuUssClass property="add-menu-button-class" />
            </Bindings>
        </ui:Button>
    </ui:VisualElement>
</ui:UXML>

  3. Дважды щелкните файл CustomBinding.uxml, чтобы открыть его в UI Builder.

  4. В панели StyleSheet выберите + > Добавить существующий USS, а затем выберите файл CustomBinding.uss.

  5. Сохраните изменения.

Проверка привязки

Чтобы проверить привязку, измените порядок элементов кнопки в UI Builder и наблюдайте за изменениями в окне UI Builder.

  1. Дважды щелкните файл CustomBinding.uxml, чтобы открыть его в UI Builder.
  2. В панели Hierarchy разверните корень VisualElement, чтобы отобразить дочерние элементы, которые являются кнопками.
  3. Перетаскивайте кнопки, чтобы изменить их порядок. Первая кнопка всегда имеет левый круглый угол, в то время как последняя кнопка всегда имеет правый круглый угол.

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