使用运行时绑定绑定到多个属性

版本： 6000.0+

此示例演示如何将数据源资产的多个属性绑定到 UI 生成器中的 UI 控件。

示例概述

此示例创建的数据源资产包含Vector3属性和float财产。这float属性是一个只读属性，它返回x,y和z的值Vector3财产。该示例绑定了Vector3属性设置为Vector3Field和float属性设置为FloatField. 当您更改Vector3属性，FloatField显示x,y和z的值Vector3财产。

此示例还演示了如何在 UI 更改时使用 To Source 绑定模式更新数据源。

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

先决条件

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

创建数据源资产

创建包含要绑定到的属性的数据源资产。

使用任何模板在 Unity 中创建项目。
在Assets文件夹中，创建一个名为ExampleMultiPropertiesObject.cs内容如下：

using Unity.Properties;
using UnityEngine;
using UnityEngine.UIElements;

#if UNITY_EDITOR
using UnityEditor;
#endif

[CreateAssetMenu]
public class ExampleMultiPropertiesObject : ScriptableObject
{
    [Header("Bind to multiple properties")]

    [CreateProperty]
    public Vector3 vector3Value;
    
    [CreateProperty]
    public float sumOfVector3Properties => vector3Value.x + vector3Value.y + vector3Value.z;
}

创建示例对象资产

选择资产 > 创建>示例 MultiProperties 对象。这会在Assets文件夹。
将资产重命名为ExampleMultiPropertiesObject.asset.

创建UI

创建一个UI，绑定到你在上一步中创建的数据源资产。在此示例中，你创建一个UXML文件，其中包含一个VisualElement，其中一个Vector3Field和一个FloatField作为其子元素。

在Assets文件夹中，创建一个名为ExampleMultiPropertiesObject.uxml.
双击ExampleMultiPropertiesObject.uxml文件以在 UI Builder 中打开它。
在“层次结构”面板中，添加 VisualElement。
将 Vector3Field 和 FloatField 添加为 VisualElement 的子元素。

将 Vector3Field 绑定到数据源

将 UI 绑定到您在上一步中创建的数据源资产。

在 VisualElement 的“检查器”面板中，从“绑定>数据源>对象”列表中，选择“ExampleMultiPropertiesObject”。
在检查器一个Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
请参阅术语表面板，右键单击 值（Value）属性，然后选择 添加绑定（Add binding）。
在“添加绑定”窗口中，从“数据源路径”列表中选择“vector3Value”。
从“绑定模式”列表中，选择“到源”。这会在UI更改时更新数据源。
选择“添加绑定”以应用更改。

将 FloatField 绑定到数据源

绑定valueFloatField 的属性转换为sumOfVector3Properties属性。

在 Float 的 Inspector 面板中，右键单击 Value 属性，然后选择 Add binding。
在“添加绑定”窗口中，从“数据源路径”列表中，选择“sumOfVector3Properties”。
从“绑定模式”列表中，选择“到目标”。这会在数据源更改时更新 UI。
选择“添加绑定”以应用更改。
保存并关闭 UI Builder。你ExampleMultiPropertiesObject.uxml文件如下所示：

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" 
xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <engine:VisualElement data-source="MulPropertyObject.asset" name="VisualElement" style="flex-grow: 1;">
        <engine:Vector3Field label="Vec3 Field">
            <Bindings>
                <engine:DataBinding property="value" data-source-path="vector3Value" binding-mode="ToSource" />
            </Bindings>
        </engine:Vector3Field>
        <engine:FloatField label="Float Field" name="FloatField">
            <Bindings>
                <engine:DataBinding property="value" data-source-path="sumOfVector3Properties" binding-mode="ToTarget" />
            </Bindings>
        </engine:FloatField>
    </engine:VisualElement>
</engine:UXML>

在 UI Builder 预览模式下测试绑定

要在UI Builder中测试绑定，请更新Vector3属性的值。如果绑定设置正确，则值会复制到数据源资产中。

在 UI 构建器中视口用户在屏幕上应用的可见区域。
在术语表中查看，选择预览。
在 Vector3Field 的 X、Y 和 Z 字段中输入随机数。FloatField 显示您输入的数字的总和。
在Assets文件夹中，选择ExampleMultiPropertiesObject.asset文件。 Inspector 窗口中的 Vector3 值ExampleObject.asset更改您输入的数字。

【注】如果无法在 Vector3Field 中输入数字，请拖移画布的右边缘使栏变宽。

其他资源

运行时数据绑定示例

使用类型转换器创建运行时绑定