2025年Aspect Ratio Fitter 重温总结(多图)

科技前沿 • 2025-04-01 21:55 • 阅读 25

大家好，我是讯享网，很高兴认识大家。

Aspect Ratio Fitter 组件是用来控制UI控件的宽高比的。

我们先来说一种比较常见的应用方式。

使用过UGUI锚点系统的都知道锚点设置成上图的作用，

它会使当前的RectTransform的四条边与Parent RectTransform的四条边保持固定的距离(分别对应Left Right Top Bottom)。在大多数情况下，我们会将其四条边的距离都设成0，这样可以让这个控件跟上一级的控件保持同样的大小。

但是,在少数情况下，我们需要让子控件跟随父控件缩放，但是又不将四条边全部设置为0的情况下(在做屏幕自适应的时候很常见)，很容易发生以下这种情况（白图的变化使黑图无法保持固定的比例）：

(白色为父,黑色为子)

这种时候，你可以考虑使用Aspect Ratio Fitter组件去控制子控件的比例。

Aspect Ratio Fitter用来附加在子控件上（比如上图的情况就是附加在黑图上），这个控件看起来相当简约，只有两个变量：

这里我们先说第二个变量，

Aspect Ratio

就是宽高比的意思，你的控件将会根据你设定的宽高比，来修正外部或者内部对控件大小的改变，使你的控件保持同样的宽高比例。无论你在AspectMode中选择任何选项，都有这个设置，当你将组件添加到UI控件的时候，会设置成你当前的宽高比。

Aspect Mode

然后我们再用图一个个说明Aspect Mode的所有选项：

None：

就是不起作用，这个忽视即可

Widht Controls Height：

由宽度控制高度，这个选项可以独立使用，可以不通过父控件的大小控制。

效果如下：

在这个模式下，你只能修改宽度，修改宽度的时候，控件会同时修改高度，让控件始终保持设定的宽高比

Height Controls Widht：

与上面类似，是指使用高度控制宽度，这个选项也可以独立使用，可以不通过父控件的大小控制

效果如下：

你在这个模式下只能通过控制高度来更改控件的大小，控件会始终保持你设定的宽高比例

Fit In Parent：

这选项不能独立使用，需要通过父控件的大小来控制，当你选择了这个模式后，这个控件的锚点设置会自动变成下图：

这个选项是可以让宽度，高度，位置和锚点被自动调整，以使该矩形拟合父控件的矩形内，看起来相当不好理解。还是看图吧：

你可以看到在修改父控件的时候，子控件始终以设定的比例的最大大小来嵌在父控件内，而无法直接修改子控件自己的大小。

Envelope Parent：

这个选项也不能独立使用，需要通过父控件的大小来控制，当你选择了这个模式后，这个控件的锚点设置也会自动变成下图：

这个选项可以让宽度，高度，位置和锚点被自动调整，使子控件始终能覆盖父控件的同时保证比例不变

看下图：

你可以看到父控件已经完全被覆盖住了，这个模式十分适合在自适应UI中用来做背景图。子图（黑图）会始终保证比例的固定，不会出现拉伸变形等情况，缺点是如果父控件比例跟子控件不一致的时候，始终子控件会有一部分不会显示。

以上就是这个控件的功能，希望大家能做出自己理想的UI