包含此页的版本:
不含此页的版本:
版本:6000+
ListView 控件是创建列表的最有效方法。此示例演示如何使用运行时绑定将 ListView 绑定到列表。运行时绑定支持运行时和编辑器UI。出于演示目的,此示例在编辑器窗口中显示 ListView。
该示例创建 ListView 和列表。若要将 ListView 绑定到列表,请将 ListView 的绑定数据源设置为包含列表的属性。
您可以在此 GitHub 存储库中找到此示例创建的已完成文件。
本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前,请熟悉以下内容:
创建示例List具有Item对象。每Item包含一个name和enabled财产。
runtime-binding-listview以存储您的所有文件。runtime-binding-listview文件夹中,创建一个名为Scripts以存储所有 C#脚本一段代码,允许您创建自己的组件、触发游戏事件、随时间修改组件属性以及以您喜欢的任何方式响应用户输入。更多信息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 Builder 中创建列表项的模板。每个项目都包含一个 Toggle 和一个 TextField。将它们绑定到enabled和name属性Item对象。
在runtime-binding-listview文件夹中,创建一个名为UXML.
在UXML文件夹中,创建一个名为ListViewItem.uxml.
双击ListViewItem.uxml文件以在 UI Builder 中打开它。
在“层次结构”面板中,添加 VisualElement。
将 Toggle 添加为 VisualElement 的子项。
将 TextField 添加为子 VisualElement。
删除 Toggle 和 TextField 的标签文本。
将 VisualElement 的 Flex 方向设置为Row.
在检查器一个Unity 窗口,显示有关当前选定游戏对象、资产或项目设置的信息,允许您检查和编辑值。更多信息
请参阅术语表面板,执行以下作:
右键单击“值”,然后选择“添加绑定”。
在“添加绑定”窗口中,将“数据源路径”设置为enabled.
将绑定模式设置为To Target.这意味着将enabled属性的Item对象更新 UI 中的 Toggle。
在 TextField 的 Inspector 面板中,执行以下作:
name.To Target.这意味着将name属性的Item对象更新 UI 中的 TextField。保存 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,并将项模板设置为ListViewItem.uxml.
在UXML文件夹中,创建一个名为UIListView.uxml.
双击UIListView.uxml文件以在 UI Builder 中打开它。
在“层次结构”面板中,添加 ListView。
在 ListView 的“检查器”面板中,执行以下作:
将项目模板设置为ListViewItem.uxml.
将绑定源选择模式设置为自动分配。这使系统能够自动确定绑定列表项的适当数据源。
保存 UXML 文件。完成的UXML文件如下所示:
<ui:UXML xmlns:ui="UnityEngine.UIElements">
<ui:ListView binding-source-selection-mode="AutoAssign" item-template="ListViewItem.uxml" />
</ui:UXML>
创建一个包含 ListView 的自定义编辑器窗口,并将其绑定到items属性List.
在Scripts文件夹中,创建一个名为Editor.
在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();
}
}
在“项目”窗口中,选择ListViewTestWindow.cs脚本。
在 Inspector 窗口中,将 Editor Layout 设置为UIListView.
若要测试绑定,请从菜单中选择“窗口”>“ListViewTestWindow”。编辑器窗口显示绑定到在ExampleItemObject.cs.如果更新enabled或name属性的Item在ExampleItemObject.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不是类型,而是字段。