Unity 6.3
0 онлайн 106 гостей 3 в системе
Вход
← UI системы Шаг 222 из 317

Привязать ListView к списку с привязкой времени выполнения

Версия: 6000.0+

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

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

В этом примере создаётся объект GameSwitchListAsset ScriptableObject, содержащий список объектов GameSwitch. Каждый объект GameSwitch имеет два свойства: enabled и name. ListView отображает список переключателей и текстовых полей, которые связаны со свойствами enabled и name каждого объекта GameSwitch.

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

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

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

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

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

Создание структуры данных, содержащей элементы списка.

  1. Создайте проект Unity с любым шаблоном.
  2. В окне Project создайте скрипт 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;
    }
}

Создание шаблона элемента ListView в UI Builder

Создайте шаблон для многократного использования, который определяет, как будет выглядеть и вести себя каждый элемент списка. ListView использует этот шаблон для создания визуальных элементов для каждого элемента данных. Подход шаблона эффективный потому, что:

  • Одно определение шаблона работает для любого количества элементов списка
  • UI Toolkit может рециклировать визуальные элементы, когда пользователи прокручивается
  • Изменения в шаблоне автоматически применяются ко всем элементам

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

  1. Создайте файл UXML с именем ListViewItem.uxml.

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

  3. В панели Hierarchy добавьте VisualElement.

  4. Добавить Переключить в качестве дочернего VisualElement.

  5. Добавить TextField в качестве дочернего VisualElement.

  6. Удалить текст метки для Переключить и TextField.

  7. Установить направление Flex из VisualElement в Row.

  8. В панели Inspector переключателя Переключитьвыполните следующие действия:

  9. Щелкните правой кнопкой мыши Значение и выберите Добавить привязку.

  10. В окне Добавить Привязку установите Путь Источника Данных на enabled.

  11. Установите Режим Привязки на Two Way. Это гарантирует, что изменения в Toggle обновят источник данных, а изменения в источнике данных обновят Toggle.

  12. В течение Inspector группы экспертов TextField, выполните следующие действия:

    • Щелкните правой кнопкой мыши Значение и выберите Добавить привязку.
    • В окне Добавить Привязку установите Путь Источника Данных на name.
    • Установите режим привязки с на Two Way. Это гарантирует, что изменения в TextField обновят источник данных, а изменения в источнике данных обновят TextField.

  13. Сохраните файл UXML. Готовый файл UXML выглядит следующим образом:

   <ui:UXML xmlns:ui="UnityEngine.UIElements" editor-extension-mode="False">
       <ui:VisualElement name="" style="flex-direction: row;">
           <ui:Toggle>
               <Bindings>
                   <ui:DataBinding property="value" data-source-path="enabled" binding-mode="TwoWay"/>
               </Bindings>
           </ui:Toggle>
           <ui:TextField placeholder-text="filler text">
               <Bindings>
                   <ui:DataBinding property="value" data-source-path="name" binding-mode="TwoWay"/>
               </Bindings>
           </ui:TextField>
       </ui:VisualElement>
   </ui:UXML>

Создать ListView UI в UI Builder

Создайте ассет, содержащий список элементов, и создайте главный UI, на котором размещается ListView. На этом шаге настраивается подключение ListView к данным и определяются возможности взаимодействия с пользователями.

  1. В меню выберите Ассеты > Создать > UIToolkitExamples > GameSwitchList. Это создаст ассет с именем GameSwitchListAsset.

  2. Создайте файл UXML с именем UIListView.uxml.

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

  4. В панели Hierarchy добавьте ListView.

  5. В течение Inspector группы экспертов ListView, настройте следующие параметры:

  6. Источник данных: Выберите GameSwitchListAsset.asset. Это устанавливает тип объекта, который ListView ожидает получить в качестве источника данных.

  7. Режим выбора источника привязки: Установите на Авто Назначение. Это говорит системе привязки автоматически определять правильный контекст данных для каждого элемента списка. При отображении шаблонов элементов каждый шаблон получает соответствующий объект GameSwitch в качестве источника привязки.

  8. Шаблон элемента: установить на ListViewItem.uxml.

  9. Show Add Remove Footers: Включите эту опцию, чтобы позволить пользователям добавлять или удалять элементы из списка.

  10. Режим переупорядочивания: Настроить на Анимированный для включения переупорядочивания с помощью перетаскивания.

  11. Сохраните файл UXML.

Установите привязку itemsSource в UXML

Последним важным шагом является подключение свойств itemsSource ListView к вашим данным. itemsSource определяет, какую коллекцию объектов отображает ListView. В этом случае, список switches из вашего GameSwitchListAsset.

Это свойство не подвергается в UI Builder’s Inspector. Вам нужно вручную отредактировать UXML добавить эту связь. itemsSource связывание — это то, что делает ListView заполнить ваши фактические элементы данных.

Чтобы создать эту привязку, добавьте тег <Bindings> внутрь <ui:ListView>:

<ui:ListView>
   <Bindings>
      <ui:DataBinding property="itemsSource" data-source-path="switches" />
   </Bindings>
</ui:ListView>

Примечание: В этом примере устанавливается itemsSource в UXML Вы также можете настроить подключение к источнику данных в вашем C# скрипт выглядит так:

var listView = rootVisualElement.Q<ListView>();
var gameSwitchListAsset = /* obtain reference to your GameSwitchListAsset instance */;
listView.dataSource = gameSwitchListAsset;

Завершенный файл UIListView.uxml выглядит следующим образом:

<ui:UXML xmlns:ui="UnityEngine.UIElements" editor-extension-mode="False">
    <ui:ListView binding-source-selection-mode="AutoAssign" item-template="ListViewItem.uxml" data-source="GameSwitchListAsset.asset" show-foldout-header="true" virtualization-method="DynamicHeight" show-border="false" reorderable="true" horizontal-scrolling="false" selection-type="Single" reorder-mode="Animated" show-add-remove-footer="true">
        <Bindings>
            <ui:DataBinding property="itemsSource" data-source-path="switches"/>
        </Bindings>
    </ui:ListView>
</ui:UXML>

Примечание: В вашем UXML файл, убедитесь, что удалить engine="UnityEngine.UIElements" и editor="UnityEditor.UIElements" атрибуты из <ui:UXML> эти атрибуты устанавливают пространство имен по умолчанию, которое нарушает <Bindings> метка потому что Bindings это не тип, а поле.

Проверка привязки в сцене

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

  1. В примерной сцене выберите GameObject > UI Toolkit > UI Документ, чтобы добавить Документ UI.
  2. В панели Inspector компонента UI Документ установите Источник Актива на UIListView.uxml.
  3. Перейдите в режим воспроизведения. ListView отображает список объектов GameSwitch из GameSwitchListAsset. Вы можете взаимодействовать с переключателями и текстовыми полями, добавлять или удалять элементы и переупорядочивать список. Все изменения отражаются в базовом источнике данных и наоборот.

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

← Предыдущий шагСоздание пользовательской привязки для привязки селекторов USS