Unity3d UGUI如何優雅的實現Web框架(Vue/Rect)類似數據綁定功能(含源碼)

前言

Unity3d的UGUI系統與Web前端開發中常見的數據綁定和屬性綁定機制有所不同。UGUI是一個相對簡單和基礎的UI系統，并不內置像Web前端（例如 Vue.js或React中）那樣的雙向數據綁定或自動更新UI的機制。UGUI是一種比較傳統的 UI 系統，它更側重于基于事件的UI更新和手動控制視圖的更新。在 UGUI中，如果數據變化了，開發者需要手動更新UI元素（例如文本、按鈕狀態、進度條等）。這種方式雖然靈活，但需要開發者自己處理每個UI更新的時機和邏輯。
對比數據可以通過雙大括號 {{}} 語法直接綁定到模板中，無需手動處理DOM元素；而Unity3d的Text修改文字內容則需要通過Text.text屬性來修改，對比起來比較麻煩，特比實在數據變量頻繁變更的情況下。要是在Unity的UGUI中實現了數據綁定，可以提高代碼冗余、提高UI數據更新開發效率、解耦數據和UI的關聯。目前實現的功能有Text內{{}}綁定數據、顏色綁定（Graphic.color）、圖片綁定（Image.sprite）、列表綁定和屬性綁定等功能。

盡管它有著諸多的優勢，如減少了代碼冗余、提高了開發效率和提高了應用的可維護性。它通過解耦視圖和數據，使得開發者能夠更關注業務邏輯，而不是繁瑣的 UI 更新操作。這使得開發者能夠更加專注于應用的核心功能，提升了代碼質量和可擴展性。但是數據綁定也有一些挑戰，特別是性能優化方面（尤其是在大規模數據或復雜 UI 交互時）。

關注并私信 U3D數據綁定 免費獲取源碼(底部公眾號)。

效果

文字綁定和列表刷新：
在這里插入圖片描述

滑動條綁定：

在這里插入圖片描述

列表綁定：

在這里插入圖片描述

顏色綁定：

在這里插入圖片描述

實現

大致實現思路如下：
1.先建立一個類(DataContext)作為管理鍵值對的容器，它允許通過鍵（key）來訪問和修改與之相關聯的值（value）。這個類還支持在值發生更改時觸發一個事件（Changed）,事件觸發時，會傳遞觸發變化的鍵。

using System;
using System.Collections.Generic;public class DataContext
{public event Action<string> contextChanged = delegate { };private IDictionary<string, object> m_ActiveBinds = new Dictionary<string, object>();public bool ContainsKey(string key){return m_ActiveBinds.ContainsKey(key);}
}

2.再建立一個DataBindContext類，管理和更新數據綁定的類。它通過 DataContext 來存儲數據，并在數據變化時通知相關的 UI 組件更新。：當數據變化時，BindChanged 方法會被觸發，自動更新所有依賴于該數據的 UI 組件。

using UnityEngine;//數據綁定類
public class DataBindContext : MonoBehaviour
{private DataContext m_DataContext;public object this[string key]{get { return m_DataContext[key]; }set{if (m_DataContext == null){m_DataContext = new DataContext();m_DataContext.contextChanged += BindChanged;}m_DataContext[key] = value;}}public void BindChanged(string key){var children = GetComponentsInChildren<IBindable>();if (children == null)return;for (var i = 0; i < children.Length; i++)if (string.IsNullOrEmpty(children[i].key) || children[i].key == key)children[i].Bind(m_DataContext);}}

3.再建立IBindable 接口，IBindable 提供了一個統一的接口來進行綁定鍵的數據更新，包括key屬性（用于綁定的key值）和Bind(DataContext context)方法，Bind方法接收一個 DataContext 參數，UI 組件通過此方法將數據模型綁定到自身，監聽數據變化，并在數據變化時自動更新UI。

public interface IBindable
{string key { get; }void Bind(DataContext context);
}

Text綁定

Text內采用“{{}}”綁定數據，是最最常用的數據綁定，例如{{Number:N0}}{{Test}}綁定了Number和Test的鍵值，當檢測到數據變更會進行刷新。
顯示前：
在這里插入圖片描述

代碼調用變更

DataBindContext.instance?.SetKeyValue("Number", 57729);
DataBindContext.instance?.SetKeyValue("Test", "測試綁定");

顯示后：
在這里插入圖片描述

Text的綁定實現就是通過實現IBindable接口的Bind方法，在其中將匹配的字符串進行替換變量數值，代碼如下：

 m_Text.text = Regex.Replace(m_OriginalText, @"\{\{[^}]*}}", m =>
{var target = m.Value.Substring(2, m.Value.Length - 4).Split(':');var key = target[0];if (context.ContainsKey(key)) {var val = context[key];if (target.Length == 2 && val is IFormattable) {var format = target[1];return ((IFormattable) val).ToString(format, CultureInfo.CurrentCulture);}return val.ToString();
}return "";
});

屬性綁定

屬性綁定是將兩個UGUI的組件屬性直接做一個關聯，當然關聯之前開發者也需要了解兩個屬性間值是否真的能關聯匹配。這里以Slider的value 關聯到 Text的text屬性為例：
在這里插入圖片描述

這樣運行時候Slider的value屬性就會同步到Text.text顯示：
在這里插入圖片描述

同時屬性綁定可以選擇方向和多種更新同步方式：

在這里插入圖片描述

不同更新同步模式的代碼：

private void Update()
{if (m_Update == UpdateMethod.OnUpdate) {UpdateBind();}
}private void FixedUpdate()
{if (m_Update == UpdateMethod.OnFixedUpdate) {UpdateBind();}
}private void LateUpdate()
{if (m_Update == UpdateMethod.OnLateUpdate) {UpdateBind();}
}

屬性更新實現：

public void UpdateBind()
{if (m_SourceProperty == null || m_DestinationProperty == null){return;}if (m_CachedSourceProperty == null || m_CachedSourceProperty.Name != m_SourceProperty|| m_CachedDestinationProperty == null || m_CachedDestinationProperty.Name != m_DestinationProperty){Cache();}switch (m_Direction){case Direction.SourceUpdatesDestination:if (m_CachedDestinationProperty.PropertyType == typeof(string)){m_CachedDestinationProperty.SetValue(m_Destination, m_CachedSourceProperty.GetValue(m_Source, null).ToString(),null);}else{m_CachedDestinationProperty.SetValue(m_Destination, m_CachedSourceProperty.GetValue(m_Source, null), null);}break;case Direction.DestinationUpdatesSource:if (m_CachedSourceProperty.PropertyType == typeof(string)){m_CachedSourceProperty.SetValue(m_Source, m_CachedDestinationProperty.GetValue(m_Destination, null).ToString(),null);}else{m_CachedSourceProperty.SetValue(m_Source, m_CachedDestinationProperty.GetValue(m_Destination, null), null);}break;}
}public void Cache()
{m_CachedSourceProperty = m_Source.GetType().GetProperty(m_SourceProperty);m_CachedDestinationProperty = m_Destination.GetType().GetProperty(m_DestinationProperty);
}

圖片綁定

[SerializeField]
[Header("綁定對象")]
private Image m_Image;
[SerializeField]
[Header("綁定鍵名")]
private string m_Key;public string key
{get { return m_Key; }
}public void Bind(DataContext context)
{if (context.ContainsKey(m_Key)){m_Image.sprite = (Sprite)context[m_Key];}
}

顏色綁定

[SerializeField]
[Header("綁定對象")]
private Graphic m_Graphic;
[SerializeField]
[Header("綁定鍵名")]
private string m_Key;public string key
{get { return m_Key; }
}public void Bind(DataContext context)
{if (context.ContainsKey(m_Key)){m_Graphic.color = (Color)context[m_Key];}
}

滑動條綁定

private Slider m_Slider;[Header("綁定鍵名")]
public string m_Key;public string key
{get { return m_Key; }
}
public void Bind(DataContext context)
{if (m_Slider == null)m_Slider = GetComponent<Slider>();if (context.ContainsKey(key)){m_Slider.value = (float)context[key];}
}

列表綁定

列表的綁定其實需要預設節點名稱和綁定鍵名等設置，如下：

[SerializeField]
[Header("列表節點預設")]
private GameObject m_ItemPrefab;
[SerializeField]
[Header("節點鍵名")]
public string m_ItemKey;
[SerializeField]
[Header("綁定鍵名")]
public string m_Key;

數據綁定刷新的代碼如下：

if (m_ItemPrefab == null)
{Debug.LogWarning("節點預設為空，無法綁定列表！");return;
}m_Context = new DataContext();if (context.ContainsKey(m_Key))
{var list = (ObservableList)context[m_Key];if (list.Count > itemObjList.Count){for (int i = itemObjList.Count; i < list.Count; i++){GameObject go = GameObject.Instantiate(m_ItemPrefab);go.transform.SetParent(transform, false);go.transform.localScale = Vector3.one;go.transform.localEulerAngles = Vector3.zero;go.transform.name = i.ToString("D4") + "item";itemObjList.Add(go);}}elsefor (int i = list.Count; i < itemObjList.Count; i++)itemObjList[i].SetActive(false);for (int i = 0; i < list.Count; i++){var itemData = list[i];var item = itemObjList[i];var bindables = item.GetComponentsInChildren<IBindable>(true);var properties = itemData.GetType().GetProperties();var model = item.GetComponent<IModel>();if (model != null)model.model = itemData;for (var j = 0; j < properties.Length; j++){var p = properties[j];m_Context[m_ItemKey + "." + p.Name] = p.GetValue(itemData, null);}for (var j = 0; j < bindables.Length; j++)bindables[j].Bind(m_Context);itemObjList[i].SetActive(true);}}

其核心思路就是存在該鍵變更時，根據列表數據顯示或者隱藏、并刷新所有子節點。通過鍵的值以列表的形式，節點不夠時克隆節點的預設，生成節點，將單個節點的數據根據綁定配置刷新到對應的組件上，直到所有節點刷新完畢。

同時預設的節點數據需要與定義的類型結構統一，這里以排行榜為例，其數據結構如下：

class RankItem
{public int index { get; set; }public string name { get; set; }public float score { get; set; }
}

index、name和score分別表示排名、玩家名稱和分數。
所以單個節點的預設的綁定應該如下配置：
在這里插入圖片描述

列表的鍵采用Ranks，同時通過如下代碼生成假數據：

int count = 10;
for (int i = count; i > 0; i--)
{m_RankItems.Add(new RankItem{index = count - i + 1,score = i * 100 + Random.Range(0, 7.6f),name = "玩家名稱" + (count - i + 1)});
}DataBindContext.instance?.SetKeyValue("Ranks", m_RankItems);

綁定列表的配置最終如下圖：
在這里插入圖片描述

綁定與變更

綁定值變更數據的鍵值變更采用如下代碼：

DataBindContext m_Context["鍵名"] = 值;

單例模式也可采用來修改值：

DataBindContext.instance?.SetKeyValue("鍵名", 值);

演示功能

這里簡單搭建一個覆蓋功能的UI：

在這里插入圖片描述

掛上對應的腳本(注意DataBindContext 需要掛在最外層)后運行效果：
在這里插入圖片描述

項目源碼

https://download.csdn.net/download/qq_33789001/90195629