Version: 1.5
语言 : 中文
创建自定义绑定以绑定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构建器中创建列表项目的模板。每个项目都包含一个切换和一个文本字段。将它们绑在enabled和name属性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. 删除标签文本 Toggle 和Textfield 。

  8. 设置 Flex direction 的VisualElement 到Row。

  9. 在 Toggle 的 Inspector面板,请执行以下操作:

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

  11. 在 ** Add Binding** 窗口,设置Data Source Path 到enabled。

  12. 在 Textfield 的 Inspector面板,请执行以下操作:

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

  14. 在 Add Binding 窗口,设置Data Source Path 到name。

  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 Method 到Dynamic Height 。

  6. 设置 Reorder Mode 为Animated 。

  7. 设置 Item Template 为ListViewItem.uxml。

  8. 设置 Binding Source Selection Mode 为 Auto Assign 。

  9. 选择 Reorderable 复选框。

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

  11. 设置 Header Title 为Items。

  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属性Item在ExampleItemObject.cs,更改会自动反映在ListView中。

其他资源

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