版本 :6000+
ListView控件是创建列表的最有效方法。此示例演示了如何使用运行时绑定将ListView绑定到列表。运行时绑定支持运行时和编辑器 UI 。为了演示目的,此示例在编辑器窗口中显示ListView。
该示例创建了一个listView和一个列表。要将列表视图绑定到列表,请将列表视图的绑定数据源设置为包含列表的属性。
您可以找到此示例在此创建的已完成的文件GitHub存储库。
本指南适用于熟悉UNITY编辑器,UI Toolkit和C#脚本的开发人员。在开始之前,请熟悉以下内容:
创建一个示例List
具有列表的对象Item
对象。每个Item
包含aname
和一个enabled
财产。
使用任何模板创建一个Unity项目。
在你的项目 窗口,创建一个名称的文件夹runtime-binding-listview
存储所有文件。
在runtime-binding-listview
文件夹,创建一个名称的文件夹Scripts
存储所有C#脚本。
在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构建器中创建列表项目的模板。每个项目都包含一个切换和一个文本字段。将它们绑在enabled
和name
属性Item
目的。
在runtime-binding-listview
文件夹,创建一个名称的文件夹UXML
。
在UXML
文件夹,创建一个名称的UXML文件ListViewItem.uxml
。
双击ListViewItem.uxml
文件以在UI构建器中打开。
在 Hierarchy 面板,添加一个VisualElement 。
添加一个 Toggle 作为一个孩子VisualElement 。
添加一个 Textfield 小时候VisualElement 。
删除标签文本 Toggle 和Textfield 。
设置 Flex direction 的VisualElement 到Row
。
在 Toggle 的 Inspector面板,请执行以下操作:
右键单击 Value 并选择Add binding 。
在 ** Add Binding** 窗口,设置Data Source Path 到enabled
。
在 Textfield 的 Inspector面板,请执行以下操作:
右键单击 Value 并选择 Add bindin 。
在 Add Binding 窗口,设置Data Source Path 到name
。
保存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,然后将项目模板设置为ListViewItem.uxml
。
在UXML
文件夹,创建一个名称的UXML文件UIListView.uxml
。
双击UIListView.uxml
文件以在UI构建器中打开。
在Hierarchy 面板,添加一个ListView 。
在Inspector 面板ListView ,请执行以下操作:
放Virtualization Method 到Dynamic Height 。
设置 Reorder Mode 为Animated 。
设置 Item Template 为ListViewItem.uxml
。
设置 Binding Source Selection Mode 为 Auto Assign 。
选择 Reorderable 复选框。
选择 Show Add Remove Footer 复选框。
设置 Header Title 为Items
。
选择 Show Foldout Header 复选框。
保存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>
在Scripts
文件夹,创建一个名称的文件夹Editor
。
在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();
}
}
编辑器窗口显示一个限制到在该项目中定义的项目的列表视图ExampleItemObject.cs
。如果更新了enabled
或者name
属性Item
在ExampleItemObject.cs
,更改会自动反映在ListView中。