Version: 1.7
语言 : 中文
创建自定义绑定以绑定USS选择器
Support for Editor UI

将ListView绑定到具有运行时绑定的列表

版本 :6000+

ListView控件是创建列表的最有效方法。此示例演示了如何使用运行时绑定将ListView绑定到列表。运行时绑定支持运行时和编辑器 UI 。为了演示目的,此示例在编辑器窗口中显示ListView。

示例概述

该示例创建了一个listView和一个列表。要将列表视图绑定到列表,请将列表视图的绑定数据源设置为包含列表的属性。

您可以找到此示例在此创建的已完成的文件GitHub存储库

先决条件

本指南适用于熟悉UNITY编辑器,UI Toolkit和C#脚本的开发人员。在开始之前,请熟悉以下内容:

用列表创建一个对象

创建一个示例List具有列表的对象Item对象。每个Item包含aname和一个enabled财产。

  1. 使用任何模板创建一个Unity项目。

  2. 在你的项目 窗口,创建一个名称的文件夹runtime-binding-listview存储所有文件。

  3. runtime-binding-listview文件夹,创建一个名称的文件夹Scripts存储所有C#脚本

  4. Scripts文件夹,创建一个名称的C#脚本ExampleItemObject.cs具有以下内容:

   using System;
   using System.Collections.Generic;
   using UnityEngine;
   
   public class ExampleItemObject  
   {
       public List<Item> items = new();
   
       public void Reset()
       {
           items = new List<Item>{
               new() { name = "Use Local Serverdfsdfsd", enabled = false },
               new() { name = "Show Debug Menu", enabled = false },
               new() { name = "Show FPS Counter", enabled = true },
           };
       }
   
       // Use a struct instead of a class to ensure that the ListView can create items 
       // when the + button is clicked.
       public struct Item
       {
           public bool enabled;
           public string name;
       }
   }

在UI构建器中创建ListView项目模板

在UI构建器中创建列表项目的模板。每个项目都包含一个切换和一个文本字段。将它们绑在enabledname属性Item目的。

  1. runtime-binding-listview文件夹,创建一个名称的文件夹UXML

  2. UXML文件夹,创建一个名称的UXML文件ListViewItem.uxml

  3. 双击ListViewItem.uxml文件以在UI构建器中打开。

  4. Hierarchy 面板,添加一个VisualElement

  5. 添加一个 Toggle 作为一个孩子VisualElement

  6. 添加一个 Textfield 小时候VisualElement

  7. 删除标签文本 ToggleTextfield

  8. 设置 Flex directionVisualElementRow

  9. ToggleInspector面板,请执行以下操作:

  10. 右键单击 Value 并选择Add binding

  11. 在 ** Add Binding** 窗口,设置Data Source Pathenabled

  12. TextfieldInspector面板,请执行以下操作:

  13. 右键单击 Value 并选择 Add bindin

  14. Add Binding 窗口,设置Data Source Pathname

  15. 保存UXML文件。完成的UXML文件看起来如下:

   <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
       <ui:VisualElement name="VisualElement" style="flex-direction: row;">
           <ui:Toggle>
               <Bindings>
                   <ui:DataBinding property="value" data-source-path="enabled"  />
               </Bindings>
           </ui:Toggle>
           <ui:TextField placeholder-text="filler text">
               <Bindings>
                   <ui:DataBinding property="value" data-source-path="name"  />
               </Bindings>
           </ui:TextField>
       </ui:VisualElement>
   </ui:UXML>

在UI构建器中创建ListView UI

在UI构建器中创建ListView UI,然后将项目模板设置为ListViewItem.uxml

  1. UXML文件夹,创建一个名称的UXML文件UIListView.uxml

  2. 双击UIListView.uxml文件以在UI构建器中打开。

  3. Hierarchy 面板,添加一个ListView

  4. Inspector 面板ListView ,请执行以下操作:

  5. Virtualization MethodDynamic Height

  6. 设置 Reorder ModeAnimated

  7. 设置 Item TemplateListViewItem.uxml

  8. 设置 Binding Source Selection ModeAuto Assign

  9. 选择 Reorderable 复选框。

  10. 选择 Show Add Remove Footer 复选框。

  11. 设置 Header TitleItems

  12. 选择 Show Foldout Header 复选框。

  13. 保存UXML文件。完成的UXML文件看起来如下:

   <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xmlns="UnityEngine.UIElements" ue="UnityEditor.UIElements" editor-extension-mode="False">
       <ui:ListView virtualization-method="DynamicHeight" reorder-mode="Animated" binding-source-selection-mode="AutoAssign" show-add-remove-footer="true" header-title="Items" reorderable="true" show-border="false" show-foldout-header="true" item-template="ListViewItem.uxml" show-bound-collection-size="false" />
   </ui:UXML>

创建一个自定义编辑器窗口并设置绑定

创建一个包含ListView的自定义编辑器窗口并将其绑定到items财产的List。此示例在C#脚本中设置绑定源。您还可以手动在ListView元素内的UXML文件中手动设置绑定源:

<ui:ListView>
    <Bindings>
        <ui:DataBinding property="itemsSource" data-source-path="items" />
    </Bindings>
</ui:ListView>
  1. Scripts文件夹,创建一个名称的文件夹Editor

  2. Editor文件夹,创建一个名称的C#脚本ListViewTestWindow.cs具有以下内容:

   using UnityEngine;
   using UnityEngine.UIElements;
   using UnityEditor;
   using UnityEditor.UIElements;
   using System.Collections.Generic;
   using Unity.Properties;
   
   internal class ListViewTestWindow : EditorWindow
   {
       [SerializeField] private VisualTreeAsset itemLayout;
       [SerializeField] private VisualTreeAsset editorLayout;
   
       ExampleItemObject m_ExampleItemObject;
       
       [MenuItem("Window/ListViewTestWindow")]
       static void Init()
       {
           ListViewTestWindow window = EditorWindow.GetWindow<ListViewTestWindow>();
           window.Show();
       }
   
       void CreateGUI()
       {
           m_ExampleItemObject = new();
   
           editorLayout.CloneTree(rootVisualElement);
           var listView = rootVisualElement.Q<ListView>();
           
           // This example sets the itemTemplate and bindingSourceSelectionMode in the UXML file.
           // You can also set them in the C# script like the following:
           //listView.itemTemplate = itemLayout;
           //listView.bindingSourceSelectionMode = BindingSourceSelectionMode.AutoAssign;
   
           // Set the binding source to the ExampleItemObject instance.
           listView.dataSource = m_ExampleItemObject;
   
           // Set the itemsSource binding to the items property of the List object.
           listView.SetBinding("itemsSource", new DataBinding() {dataSourcePath = new PropertyPath("items")});
           
           m_ExampleItemObject.Reset();
       }
   }
   

测试结合

  • 从菜单中选择 Window > ListViewTestWindow

编辑器窗口显示一个限制到在该项目中定义的项目的列表视图ExampleItemObject.cs。如果更新了enabled或者name属性ItemExampleItemObject.cs,更改会自动反映在ListView中。

其他资源

创建自定义绑定以绑定USS选择器
Support for Editor UI