当前位置：首页 > ai >正文

UE5 UI 水平框

ai 2025/7/23 10:08:30

文章目录

- slot
- - 区分尺寸和对齐方式
  - 尺寸：自动模式
  - 尺寸：填充模式
  - 对齐
- 常用设置
- - 所有按钮大小一致，不受文本影响
  - 靠右排列

和unity的HorizontalLayout不太一样

slot

以在水平框中放入带文字的按钮为例
UI如下布置
在这里插入图片描述
按钮的大小受slot的尺寸、对齐和内部文字的多重控制

区分尺寸和对齐方式

尺寸是控制按钮所在的这个“元素块”如何占据水平框的空间
对齐方式是控制按钮本身如何占据“元素块” 的空间

尺寸：自动模式

默认slot为自动模式，此时UI会整体靠左，并填充到刚好可以显示文字的长度
在这里插入图片描述

在这里插入图片描述

尺寸：填充模式

三个Button会平分剩下的空间，此时忽略文本的长度，下图中第一个按钮的文字入侵到第二个的区域
在这里插入图片描述

对齐

对齐控制按钮如何占据自己所在的元素块，默认情况为水平和垂直都拉伸到最大
下图展示了在尺寸为填充模式下，水平和垂直对齐都拉伸到最大的效果，此时所有的按钮平分所有剩余空间，且每个按钮占满自己的元素块
在这里插入图片描述

如果将第一个按钮对齐调整为水平和垂直都居中，但是尺寸还是填充模式。
此时第一个按钮的元素块依然和另外两个按钮平分水平框区域，但是按钮本身此时受内部文本控制大小