创建宽高比自定义控件

这纵横比图像比例尺寸的关系，例如其宽度和高度。
请参阅术语表是显示器的宽度和高度之间的比率。纵横比用于保持显示器的比例。例如，如果您有4:3纵横比，则显示为4 像素计算机图像中的最小单位。像素大小取决于您的屏幕分辨率。像素光照是在每个屏幕像素下计算的。更多信息
请参阅术语表宽阔，适合每个人3像素高度。如果你有一个16:9纵横比，则显示为16每个像素宽9像素高度。

您可以设置视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表使用aspect-ratioUSS财产直接。此示例演示如何使用几何图形更改事件来维护自定义控件的纵横比。

示例概述

此示例创建一个自定义控件，该控件维护其子元素的指定纵横比。出于演示目的，如果显示比例较宽，自定义控件会向左和向右添加填充。如果显示比例较高，它会在顶部和底部添加填充。这会推动中心项目以适应纵横比。

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

先决条件

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

创建自定义控件类

创建继承自VisualElement具有两个属性：width和height.这width和height属性用于计算纵横比。

使用任何模板创建 Unity 项目。

创建名为AspectRatio.cs内容如下：

using UnityEngine;
using UnityEngine.UIElements;
    
// Custom element that lays out its contents following a specific aspect ratio.
[UxmlElement]
public partial class AspectRatioElement : VisualElement
{
    // The ratio of width.
    [UxmlAttribute("width")]
    public int RatioWidth
    {
        get => _ratioWidth;
        set
        {
            _ratioWidth = value;
            UpdateAspect();
        }
    }
    
    // The ratio of height.
    [UxmlAttribute("height")]
    public int RatioHeight
    {
        get => _ratioHeight;
        set
        {
            _ratioHeight = value;
            UpdateAspect();
        }
    }
    
    // Padding elements to keep the aspect ratio.
    private int _ratioWidth = 16;
    private int _ratioHeight = 9;
    
    public AspectRatioElement()
    {
        // Update the padding elements when the geometry changes.
        RegisterCallback<GeometryChangedEvent>(UpdateAspectAfterEvent);
        // Update the padding elements when the element is attached to a panel.
        RegisterCallback<AttachToPanelEvent>(UpdateAspectAfterEvent);
    }
    
    static void UpdateAspectAfterEvent(EventBase evt)
    {
        var element = evt.target as AspectRatioElement;
        element?.UpdateAspect();
    }
    
    private void ClearPadding()
    {
        style.paddingLeft = 0;
        style.paddingRight = 0;
        style.paddingBottom = 0;
        style.paddingTop = 0;
    }
        
    // Update the padding.
    private void UpdateAspect()
    {
        var designRatio = (float)RatioWidth / RatioHeight;
        var currRatio = resolvedStyle.width / resolvedStyle.height;
        var diff = currRatio - designRatio;
            
        if (RatioWidth <= 0.0f || RatioHeight <= 0.0f)
        {
            ClearPadding();
            Debug.LogError($"[AspectRatio] Invalid width:{RatioWidth} or height:{RatioHeight}");
            return;
        }
    
        if (float.IsNaN(resolvedStyle.width) || float.IsNaN(resolvedStyle.height))
        {
            return;
        }
            
        if (diff > 0.01f)
        {
            var w = (resolvedStyle.width - (resolvedStyle.height * designRatio)) * 0.5f;
            style.paddingLeft = w;
            style.paddingRight = w;
            style.paddingTop = 0;
            style.paddingBottom = 0;
        }
        else if (diff < -0.01f)
        {
            var h = (resolvedStyle.height - (resolvedStyle.width * (1/designRatio))) * 0.5f;
            style.paddingLeft= 0;
            style.paddingRight = 0;
            style.paddingTop = h;
            style.paddingBottom = h;
        }
        else
        {
            ClearPadding();
        }
    }
}

使用自定义控件

创建使用自定义控件的自定义编辑器窗口。测试自定义控件，以查看更改纵横比时的行为方式。

创建名为AspectRatioDemo.cs内容如下：

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
    
public class AspectRatioDemo : EditorWindow
{
    
    [MenuItem("Test/AspectRatioDemo")]
    public static void ShowExample()
    {
        AspectRatioDemo wnd = GetWindow<AspectRatioDemo>();
        wnd.titleContent = new GUIContent("AspectRatioDemo");
    }
    
    public void CreateGUI()
    {
        // Each editor window contains a root VisualElement object.
        VisualElement root = rootVisualElement;
    
        var aspectRatio = new AspectRatioElement();
        aspectRatio.style.flexGrow = 1;
    
        var widthField = new IntegerField() { value = aspectRatio.RatioWidth, label = "W"};
        var heightField = new IntegerField() { value = aspectRatio.RatioHeight, label = "H" };
    
        root.Add(widthField);
        root.Add(heightField);
        root.Add(aspectRatio);
    
        var contents = new VisualElement();
        aspectRatio.Add(contents);
    
        aspectRatio.style.backgroundColor = Color.black;
    
        contents.style.backgroundColor = Color.green;
    
        widthField.RegisterValueChangedCallback((evt) =>aspectRatio.RatioWidth = evt.newValue);
        heightField.RegisterValueChangedCallback((evt) => aspectRatio.RatioHeight = evt.newValue);
            
        contents.style.width = new Length(100, LengthUnit.Percent);
        contents.style.height = new Length(100, LengthUnit.Percent);
            
        contents.RegisterCallback<GeometryChangedEvent>((evt) =>
        {
            Debug.Log($"Content ratio: {evt.newRect.width} x {evt.newRect.height} : {evt.newRect.width/evt.newRect.height}");
        });
    
    }
}

从菜单中，选择测试>纵横比演示（Test Aspect Ratio Demo）。
将纵横比更改为不同的值。自定义控件会根据编辑器窗口的大小向左和右或顶部和底部添加填充。

其他资源

支持运行时 UI

在窗口之间创建拖放列表和树视图

创建自定义库存属性抽屉