Version: 6000.3
语言: 中文
创建自定义绑定以绑定 USS 选择器
SerializedObject 数据绑定

使用运行时绑定将 ListView 绑定到列表

版本:6000+

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

示例概述

该示例创建 ListView 和列表。若要将 ListView 绑定到列表,请将 ListView 的绑定数据源设置为包含列表的属性。

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

先决条件

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

使用列表创建对象

创建示例List具有Item对象。每Item包含一个nameenabled财产。

  1. 使用任何模板创建 Unity 项目。
  2. “项目”窗口中,创建一个名为runtime-binding-listview以存储您的所有文件。
  3. runtime-binding-listview文件夹中,创建一个名为Scripts以存储所有 C#脚本一段代码,允许您创建自己的组件、触发游戏事件、随时间修改组件属性以及以您喜欢的任何方式响应用户输入。更多信息
    请参阅术语表
    .
  4. Scripts文件夹中,创建一个名为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 Server", enabled = false },
               new() { name = "Show Debug Menu", enabled = false },
               new() { name = "Show FPS Counter", enabled = true },
           };
       }
   
       public struct Item
       {
           public bool enabled;
           public string name;
       }
   }

在 UI 生成器中创建 ListView 项模板

在 UI Builder 中创建列表项的模板。每个项目都包含一个 Toggle 和一个 TextField。将它们绑定到enabledname属性Item对象。

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

  2. UXML文件夹中,创建一个名为ListViewItem.uxml.

  3. 双击ListViewItem.uxml文件以在 UI Builder 中打开它。

  4. 在“层次结构”面板中,添加 VisualElement

  5. Toggle 添加为 VisualElement 的子项。

  6. TextField 添加为子 VisualElement

  7. 删除 ToggleTextField 的标签文本。

  8. VisualElementFlex 方向设置为Row.

  9. 检查器一个Unity 窗口,显示有关当前选定游戏对象、资产或项目设置的信息,允许您检查和编辑值。更多信息
    请参阅术语表
    面板,执行以下作:

  10. 右键单击“值”,然后选择“添加绑定”。

  11. 在“添加绑定”窗口中,将“数据源路径”设置为enabled.

  12. 绑定模式设置为To Target.这意味着将enabled属性的Item对象更新 UI 中的 Toggle。

  13. TextFieldInspector 面板中,执行以下作:

    • 右键单击“值”,然后选择“添加绑定”。
    • 在“添加绑定”窗口中,将“数据源路径”设置为name.
    • 绑定模式设置为To Target.这意味着将name属性的Item对象更新 UI 中的 TextField。
  14. 保存 UXML 文件。完成的UXML文件如下所示:

   <ui:UXML xmlns:ui="UnityEngine.UIElements">
       <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文件夹中,创建一个名为UIListView.uxml.

  2. 双击UIListView.uxml文件以在 UI Builder 中打开它。

  3. 在“层次结构”面板中,添加 ListView

  4. ListView“检查器”面板中,执行以下作:

  5. 项目模板设置为ListViewItem.uxml.

  6. 将绑定源选择模式设置为自动分配。这使系统能够自动确定绑定列表项的适当数据源。

  7. 保存 UXML 文件。完成的UXML文件如下所示:

   <ui:UXML xmlns:ui="UnityEngine.UIElements">
       <ui:ListView binding-source-selection-mode="AutoAssign" item-template="ListViewItem.uxml" />
   </ui:UXML>

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

创建一个包含 ListView 的自定义编辑器窗口,并将其绑定到items属性List.

  1. Scripts文件夹中,创建一个名为Editor.

  2. Editor文件夹中,创建一个名为ListViewTestWindow.cs包含以下内容:

    using UnityEngine;
    using UnityEngine.UIElements;
    using UnityEditor;
    using UnityEditor.UIElements;
    using System.Collections.Generic;
    using Unity.Properties;
        
    internal class ListViewTestWindow : EditorWindow
    {
        // This example sets the itemTemplate and bindingSourceSelectionMode in the UXML file.
        // If you want to set them in the C# script, declare an itemLayout field of type VisualTreeAsset
        // and then set the "Item Layout" to "ListViewItem.uxml" in the Inspector window.
        //[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.
            // You can also set the itemsSource binding manually in the UXML file and comment out this line. 
            // Refer to the next section for how to set binding in UXML.
            listView.SetBinding("itemsSource", new DataBinding() {dataSourcePath = new PropertyPath("items")});
                
            m_ExampleItemObject.Reset();
        }
    }
        
    
  3. “项目”窗口中,选择ListViewTestWindow.cs脚本。

  4. Inspector 窗口中,将 Editor Layout 设置为UIListView.

  5. 若要测试绑定,请从菜单中选择“窗口”>“ListViewTestWindow”。编辑器窗口显示绑定到在ExampleItemObject.cs.如果更新enabledname属性的ItemExampleItemObject.cs,更改会自动反映在 ListView 中。

itemsSourceUXML 中的绑定

上一节将itemsSource在 C# 脚本中。iList不可序列化,因此itemsSource不会显示在 ListView 的“检查器”面板中。您无法在 UI Builder 中设置绑定。但是,您可以手动绑定itemsSource在 UXML 中。为此,请添加一个<Bindings>标签<ui:ListView>:

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

注意:在UXML文件中,请确保删除engine="UnityEngine.UIElements"editor="UnityEditor.UIElements"属性<ui:UXML>标签。这些属性设置默认命名空间,这会破坏<Bindings>标记,因为Bindings不是类型,而是字段。

其他资源

创建自定义绑定以绑定 USS 选择器
SerializedObject 数据绑定