版本:6000+
ListView 控件是创建列表的最有效方法。此示例演示如何使用运行时绑定将 ListView 绑定到列表。运行时绑定支持运行时和编辑器__ UI__(即用户界面,User Interface)让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary。出于演示目的,此示例在编辑器窗口中显示 ListView。
该示例将创建一个 ListView 和一个列表。要将 ListView 绑定到列表,请将 ListView 的绑定数据源设置为包含列表的属性。
可以在此 GitHub 代码仓库中找到此示例创建的完整文件。
本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发者。在开始之前,请熟悉以下内容:
创建一个包含 Item 对象列表的示例 List 对象。每个 Item 都包含一个 name 和一个 enabled 属性。
runtime-binding-listview 的文件夹来存储所有文件。runtime-binding-listview 文件夹中,创建一个名为 Scripts 的文件夹来存储所有 C# 脚本。Scripts 文件夹中,创建一个名为 ExampleItemObject.cs 的 C# 脚本,其中包含以下内容: 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 Builder 中创建列表项的模板。每个项都包含一个 Toggle 和一个 TextField。将它们绑定到 Item 对象的 enabled 和 name 属性。
在 runtime-binding-listview 文件夹中,创建一个名为 UXML 的文件夹。
在 UXML 文件夹中,创建一个名为 ListViewItem.uxml 的 UXML 文件。
双击 ListViewItem.uxml 文件可在 UI Builder 中打开该文件。
在层级视图 (Hierarchy) 面板中,添加 VisualElement。
将 Toggle 添加为 VisualElement 的子项。
将 TextField 添加为子 VisualElement。
删除 Toggle 和 TextField 的标签文本。
将 VisualElement 的灵活方向 (Flex direction) 设置为 Row。
在 Toggle 的检视面板 (Inspector) 中,执行以下操作:
右键单击值 (Value) 并选择添加绑定 (Add binding)。
在添加绑定 (Add binding) 窗口中,将数据源路径 (Data Source Path) 设置为 enabled。
在 TextField 的检视面板 (Inspector) 中,执行以下操作:
name。保存 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 Builder 中创建 ListView UI,并将项模板设置为 ListViewItem.uxml。
在 UXML 文件夹中,创建一个名为 UIListView.uxml 的 UXML 文件。
双击 UIListView.uxml 文件可在 UI Builder 中打开该文件。
在层级视图 (Hierarchy) 面板中,添加 ListView。
在 ListView 的检视面板 (Inspector) 中,执行以下操作:
将可视化方法 (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">
<ui:ListView binding-source-selection-mode="AutoAssign" item-template="ListViewItem.uxml" />
</ui:UXML>
创建包含 ListView 的自定义编辑器窗口,并将其绑定到 List 的 items 属性。此示例在 C# 脚本中设置绑定源。还可以在 ListView 元素中的 UXML 文件中手动设置绑定源,如下所示:
<ui:ListView>
<Bindings>
<ui:DataBinding property="itemsSource" data-source-path="items" />
</Bindings>
</ui:ListView>
Scripts 文件夹中,创建一个名为 Editor 的文件夹。Editor 文件夹中,创建一个名为 ListViewTestWindow.cs 的 C# 脚本,其中包含以下内容: 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();
}
}
编辑器窗口显示绑定到 ExampleItemObject.cs 中定义的项的 ListView。如果在 ExampleItemObject.cs 中更新 Item 的 enabled 或 name 属性的值,则更改会自动反映在 ListView 中。