← UI системы Шаг 237 из 317

Привязать к списку с ListView

Версия: 2021.3+

Управление ListView является наиболее эффективным способом создания списков. Чтобы связать список с ListView, установите путь привязки ListView на имя свойства, которое содержит список.

В этом примере показано, как привязать к списку с помощью ListView.

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

Пример создает список переключателей и привязывает этот список к лежащему в основе списку объектов GameSwitch.

Список пользовательских переключателей, отображаемых в Unity Editor.

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

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

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

Создание объекта со списком

Создайте объект GameSwitch и серийный объект, имеющий в качестве свойства список объектов GameSwitch.

Создайте проект Unity с любым шаблоном.
В окне Project создайте папку bind-to-list для хранения всех ваших файлов.
Создайте скрипт C# с именем GameSwitchListAsset.cs и замените его содержимое следующим:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using UnityEngine;
  
[CreateAssetMenu(fileName = "GameSwitchListAsset.asset", menuName = "GameSwitchListAsset")]
public class GameSwitchListAsset : ScriptableObject
{
    public List<GameSwitch> switches = new();

    public void Reset()
    {
        switches = new List<GameSwitch>{
            new() { name = "Use Local Server", enabled = false },
            new() { name = "Show Debug Menu", enabled = false },
            new() { name = "Show FPS Counter", enabled = true },
        };
    }

    public bool IsSwitchEnabled(string switchName) => switches.Find(s => s.name == switchName).enabled;

    [Serializable]
    public struct GameSwitch
    {
        public bool enabled;
        public string name;
    }
}

Создать шаблон UXML для элементов списка и ListView UI

Создайте шаблон элемента списка. Каждый элемент содержит Toggle и TextField. Создайте ListView UI и установите шаблон элемента на шаблон элемента списка.

Создайте файл UXML с именем game_switch.uxml со следующим содержимым:

<ui:UXML xmlns:ui="UnityEngine.UIElements" editor-extension-mode="False">
    <ui:Box style="flex-direction: row;">
        <ui:Toggle binding-path="enabled"/>
        <ui:TextField binding-path="name" readonly="false" style="flex-grow: 1;"/>
    </ui:Box>
</ui:UXML>

Создайте файл UXML с именем game_switch_list_editor.uxml и следующим содержимым:

<ui:UXML xmlns:ui="UnityEngine.UIElements" editor-extension-mode="False">
    <ui:ListView virtualization-method="DynamicHeight" reorder-mode="Simple" binding-path="switches" show-add-remove-footer="true" show-foldout-header="true" header-title="" reorderable="true" item-template="game_switch.uxml" allow-add="true">
    </ui:ListView>
</ui:UXML>

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

Создайте настраиваемое окно Редактора, которое может создавать ассет со списком переключателей. Привязайте список переключателей к списку GameSwitch, установив атрибут binding-path Документа UI на имя свойства списка GameSwitch, которое является switches.

В меню выберите Ассеты > Создать > UIToolkitExamples > GameSwitchList. Это создаст ассет с именем New Game Switch List Asset.
Создайте папку под названием Editor.

В течение Редактор папка, создать C# скрипт назван GameSwitchListEditor.cs со следующим содержанием:

using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;
    
public class ListViewBindingExample : EditorWindow
{
    [SerializeField]
    private VisualTreeAsset m_VisualTreeAsset = default;
    
    [SerializeField]
    private GameSwitchListAsset gameSwitchList;
    
    [MenuItem("UI Toolkit Examples/ListView SerializedObject Binding Example")]
    public static void ShowExample()
    {
        ListViewBindingExample wnd = GetWindow<ListViewBindingExample>();
        wnd.titleContent = new GUIContent("ListView Binding SerializedObject Example");
    }
    
    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        m_VisualTreeAsset.CloneTree(root);
    
        var listView = root.Q<ListView>();
        if (listView != null && gameSwitchList != null)
        {
            // Set the items source.
            listView.itemsSource = gameSwitchList.switches;
            // Bind the ListView to the GameSwitchListAsset serialized object.
            listView.Bind(new SerializedObject(gameSwitchList));
        }
    }
}

Выберите GameSwitchListEditor.cs в окне Project.
В панели Inspector выполните следующие действия:
- Установить UXML актив на game_switch_list_editor.uxml
- Установить Game Переключить список активов на GameSwitchListAsset.asset.

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

В меню выберите UI Toolkit Примеры > ListView SerializedObject Пример привязки, чтобы открыть окно пользовательского редактора.
В окне Project выберите GameSwitchListAsset. Это отобразит список переключателей в Inspector. Вы можете изменить порядок списка, сжать его, добавить или удалить элементы из списка, а также изменить количество элементов в списке. Если вы внесете изменения в окне Пользовательского Редактора, свойство switches объекта GameSwitchListAsset изменится, и наоборот.

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

← Предыдущий шагПолучение обратных вызовов при изменении связанных свойств Следующий шаг →Привязать к списку без ListView