插件进阶用法

本文将介绍 VectoUI 的进阶用法，并结合实际案例，帮助开发者更好地理解如何使用 VectoUI 插件来优化 Unity3D 项目中的 UI 开发流程。

美术制作规范

为了获得更稳定的组件生成结果，我们建议美术同学在各类设计工具中遵循以下规范：

另外，我们也整理了一些常用的命名关键字。这些关键字可以帮助开发者在实际项目中更高效地使用 VectoUI 提供的组件与工具。

节点前缀	代表含义	备注
btn_	按钮组件	请配置在按钮底板组件层/节点上
button_	按钮组件	请配置在按钮底板组件层/节点上
txt_	Text 文本
ic_	图标组件
icon_	图标组件
img_	图片和图形组件
group_	组群/容器	一般用于命名分组文件夹或作为容器父节点
canvas_	画布组件	当该层需要额外挂载 `Canvas` 组件时

VectoUI 组件绑定工具

组件绑定工具 是一个轻量级的脚本附着器。

它用于在生成 Prefab 的过程中，根据节点命中的关键字与绑定规则，自动挂载对应的组件。

默认支持的组件大多基于 UGUI 常用基础组件。同时也支持项目组按需绑定自定义组件。

[1] 点击此处开启 绑定功能开关
[2] 点击此处打开 绑定规则
[3] 在 绑定规则 面板中，我们已经预置了一部分默认匹配规则。项目组可以根据实际情况保留或修改
[4] 绑定规则 也支持简单扩展。若要绑定自定义组件，请将绑定类型设置为 Custom：

using UnityEngine;
using UnityEngine.UI;

public class GamePetIcon : MonoBehaviour
{
    
    void Start()
    {
        var img = GetComponent<Image>();
        img.sprite = Resources.Load<Sprite>("icons/pet_icon");
        // TODO: 扩展对应的逻辑
    }
}

使用注意事项

组件绑定 工具主要适用于相对简单的绑定需求，比如直接绑定 UGUI 标准组件，或在指定节点上挂载项目内的特效组件，例如 EffectFadeIn、DotweenAnimator、CustomButton 等。
美术同学在制作资源时，请注意不要在无关节点或组件命名中加入这些关键字，否则可能导致不必要的解析错误。
如果你的需求更复杂，例如除了挂载脚本外，还需要设置属性、修改节点对齐方式、调整层级、注入外部引用，或在某个节点下动态生成并挂载一组 Prefab，请参考下文的 后构建流程。

VectoUI 生成后构建流程

生成后构建流程 主要用于解决项目组在节点生成和组件生成阶段的复杂定制需求。

它为项目组提供了较高自由度的扩展能力，适合有经验的开发者通过接口进行扩展，并根据项目需求实现符合预期的组件生成逻辑。

简单来说，你可以通过 IVectoUINodePostProcess 接口编写自己的节点后处理逻辑。

使用方法

在项目内任意路径的 Editor 目录下，添加一个实现 IVectoUINodePostProcess 的类，并实现对应的接口方法：

public void OnNodePostBuild(VectoUIPostNodeInfo nodeInfo)

在 VectoUI 的 Prefab 生成流程中，每处理一个节点，系统都会按一定顺序调用所有实现了 IVectoUINodePostProcess 的类，并传入当前节点信息，便于开发者执行自定义处理。

下面结合一个实际案例来说明这个功能。

实际案例

项目组在使用 VectoUI 落地某个 Popup 弹窗页面时，发现生成后的 Text 效果与美术预期不一致，因此需要在生成后增加自定义处理逻辑，以满足视觉要求。

下面这段脚本是项目中自定义扩展的 后处理流程，用于对 TMP 文本执行一些自动化优化和组件处理：

// 用户自定义的 VectoUI 节点后处理逻辑
public class CustomVectoUIPostProcess: IVectoUINodePostProcess
{
    public static bool enablePostProcess = true;


    public void OnNodePostBuild(VectoUIPostNodeInfo nodeInfo)
    {
        // 工具启用开关
        if(!enablePostProcess)
            return;

        // 美术规范预先约定好的节点命名
        if (nodeInfo.GameObject.name.StartsWith("txt_"))
        {
            Debug.Log($"=== fix 文本框：{nodeInfo.GameObject.name}");
            // 声明自定义逻辑接管文本边界调整
            nodeInfo.SkipDefaultTextBoundsAdjustment = true;

            // 搜索所有的 Text 文本框
            var tmpText = nodeInfo.GameObject.GetComponent<TMP_Text>();
            if (tmpText != null)
            {
                // 取消文本框的可点击响应
                tmpText.raycastTarget = false;

                // 字体加粗
                tmpText.fontStyle = FontStyles.Bold;

                // 赋予 TMP 字体特效 Material
                var mat  = AssetDatabase.LoadAssetAtPath<Material>("Assets/Fonts/Arial_TMP/Arial - Regular Material - OL.mat");
                tmpText.fontMaterial = mat;
                
                // 文本框的节点改为宽高全拉伸
                var rc = nodeInfo.GameObject.GetComponent<RectTransform>();
                if (rc != null)
                {
                    rc.SetToFullStretch(); // 宽高全拉伸
                    // 此处应用了 VectoUI 提供的快捷设置接口, 相当于:                       
                    // rc.anchorMin = Vector2.zero;
                    // rc.anchorMax = Vector2.one;
                    // rc.anchoredPosition = Vector2.zero;
                    // rc.sizeDelta = Vector2.zero;
                    // rc.offsetMin = Vector2.zero;
                    // rc.offsetMax = Vector2.zero;
                }
            }
            
        }
        

        // 其他逻辑...

    }
}

使用注意事项

当项目中实现了 IVectoUINodePostProcess 后，这套逻辑会持续生效。若项目存在特定场景需求，可以考虑通过宏控制启用条件，或增加自定义开关。
IVectoUINodePostProcess 和 VectoUIAssetBindeRule 会同时生效，因此在设计使用策略时，需要特别注意二者之间的冲突问题。
在使用过程中，建议多测试、多调试；如果发现问题，也欢迎反馈给 VectoUI 支持团队，帮助我们持续改进开发体验。