通过运行时绑定与多个属性结合

版本：6000.0+

此示例演示了如何将数据源资产的多个属性绑定到一个 UI 在UI构建器中控制。

示例概述

此示例创建一个数据源资产，其中包含一个Vector3财产和float财产。这float属性是仅阅读属性，返回x、y和z值的值Vector3财产。该示例绑定了Vector3属性Vector3Field和float属性FloatField。当您更改Vector3UI中的属性，FloatField显示x、y和z值的值Vector3财产。

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

UI Builder预览模式

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

先决条件

本指南适用于熟悉UNITY编辑器，UI Toolkit和C＃脚本的开发人员。在开始之前，请熟悉以下内容：

创建数据源资产

创建一个数据源资产，其中包含您要绑定到的属性。

在 Unity 中使用任何模板创建项目。
在Assets项目的文件夹，创建一个 C＃脚本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;
    }

创建示例对象资产

选择 Assets > Create > Example MultiProperties Object 。这将在Assets您项目的文件夹。
将资产重命名为ExampleMultiPropertiesObject.asset。

创建UI

创建一个UI，该UI绑定到您在上一步中创建的数据源资产。在此示例中，您可以创建一个UXML文件，其中包含带有Vector3field的VisualEllement和floatfield作为其子元素。

在Assets项目的文件夹，创建一个名为uxml文件ExampleMultiPropertiesObject.uxml。
双击ExampleMultiPropertiesObject.uxml文件以在UI构建器中打开。
在 Hierarchy 面板，添加一个VisualElement 。
添加vector3field 和FloatField 作为VisualElement的子元素。

将vector3field绑定到数据源

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

在 VisualElement 的 监视器 面板中，来自 Bindings > Data Source > Object 列表，选择extplemultipropertiesObject 。
在 vector3field 的 监视器面板中，右键单击 Value 属性并选择 Add binding（添加绑定）。
在 Add binding 窗口，从 Data Source Path 列表中选择 vector3Value。
从 Binding Mode 列表中，选择 To Source。这会在 UI 更改时更新数据源。
选择 Add binding 应用您的更改。

将Floatfield绑定到数据源

绑定valueFloatfield的财产sumOfVector3Properties数据源资产的属性。

在 Float 的 Inspector 面板中，右键单击 Value 属性，然后选择 Add binding （添加绑定）。
在 Add Binding 窗口中，从 Data Source Path 列表中选择 sumOfVector3Properties。
从 Binding Mode 列表中，选择 To Target。这会在数据源更改时更新 UI。
选择 Add binding （添加绑定）以应用更改。
保存并关闭UI构建器。你的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构建器预览模式下测试绑定

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

在UI构建器中 Viewport ，选择预览。
在 vector3field 的 x、y和z 字段输入随机数。这FloatField 显示您输入的数字的总和。
在Assets您项目的文件夹，选择ExampleMultiPropertiesObject.asset文件。这 Vector3Field 在检查员窗口ExampleObject.asset更改您输入的数字。

注意：如果您无法在vector3field ，通过拖动画布的右边缘使场更宽。

其他资源

运行时数据绑定示例

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