无需手动绑定的 UI Toolkit

Unity UI Toolkit 很强大，但日常界面仍然意味着 boilerplate：UXML 树、C# 的 Q<> 查找、manual bindings，以及一堆 MVVM 式回调。搜索词往往是 unity uitoolkit binding boilerplate、unity ui toolkit mvvm、uitoolkit data binding —— 而不是「类 Vue 框架」。

SUS 回应这种痛点：一个 .sharq 文件、响应式的 Prop / Computed / Watch，对同一套 UI 无需手动绑定。

对照

同一个计数器：label + button。先看原生 UI Toolkit（UXML + 手写 data binding 的 C#），再看同一界面写成 .sharq SFC。

原生 UI Toolkit — UXML + C#

<!-- Counter.uxml -->
<ui:UXML xmlns:ui="UnityEngine.UIElements">
  <ui:VisualElement class="counter">
    <ui:Label name="value-label" text="0" class="counter__value" />
    <ui:Button name="inc-button" text="+1" />
  </ui:VisualElement>
</ui:UXML>

// CounterView.cs — manual bindings / MVVM-ish glue
using UnityEngine;
using UnityEngine.UIElements;

public class CounterView : MonoBehaviour
{
    [SerializeField] UIDocument document;

    Label _valueLabel;
    Button _incButton;
    int _count;

    void OnEnable()
    {
        var root = document.rootVisualElement;
        _valueLabel = root.Q<Label>("value-label");
        _incButton = root.Q<Button>("inc-button");

        // Manual subscription — easy to forget on disable / rebuild
        _incButton.clicked += OnInc;
        Refresh();
    }

    void OnDisable()
    {
        if (_incButton != null)
            _incButton.clicked -= OnInc;
    }

    void OnInc()
    {
        _count++;
        Refresh(); // hand-pushed data binding
    }

    void Refresh()
    {
        if (_valueLabel != null)
            _valueLabel.text = _count.ToString();
    }
}

SUS — .sharq（无需手动绑定）

<!-- Counter.sharq -->
<template>
  <ui:VisualElement $MainElement class="counter">
    <ui:Label :text="Count" class="counter__value" />
    <ui:Button text="+1" @click="OnInc" />
  </ui:VisualElement>
</template>

<script>
public Prop<int> Count = new(0);
private void OnInc() => Count.Value++;
</script>

<style>
.counter { flex-direction: row; align-items: center; }
.counter__value { font-size: 24px; margin-right: 12px; }
</style>

改 Count.Value —— label 就会更新。没有 Q<>、没有 clicked +=、也没有为这个界面的 data binding 写 Refresh()。

你不再需要写的东西

痛点（搜索词）	原生 UI Toolkit	使用 SUS
boilerplate	UXML + MonoBehaviour + lookup + subscribe	一个 .sharq
manual bindings	Q<> + callbacks + text = …	基于 Prop 的 :text / @click
MVVM / 每个界面一套 view-model	常常要手写	组件内的响应式数据源
data binding 胶水	每个字段都要重写	内置 Prop / Computed / Watch

Editor 编译会把 .sharq 变成普通的 [UxmlElement] partial class + USS —— UI Builder 和调试器仍然看到的是正常 C#。

下一步

• 快速开始 —— 安装免费的 Core + Router
• .sharq 格式 · 响应式
• 完整指南：快速开始 · 响应式