UE5之UMG基础第1篇:统一网格面板（ue5 新功能）

zhezhongyun 2025-07-10 22:10 32 浏览

目标：记录和学习UE5的UMG方法制作UI，使用UniformGridPanel制作效果如下：

前言：UniformGridPanel统一网格面板，就是所有子元素大小和间隔等统一，这种效果经常用到。

1：打开之前创建好的工程，本文不是从零开始讲解，目的只是介绍UniformGridPanel面板的使用和效果:

2：在UniformGridPanel节点下面添加子组件元素，值得注意的是子组件的大小不能自己调节，因为同意网格面板要求所有子组件大小统一，所以在父组件UniformGridPanel中会根据子组件数量和位置自动计算，所以要选中横向+纵向拉伸即可。

3：继续增加到3个子组件的，我们发现所有子组件都重叠覆盖在一起了，这是因为我们没有设置子组件的布局位置，选中要调节的子组件，然后按下箭头进行调节即可

按下向右调节按钮就是向右移动一个单位，其他箭头同理，接下来我们向下移动增加向下的单位，组成第二列效果

如此我们把今天要的效果先排列出来如下：

4：调节子组件间隔，选中其中一个子组件，我们试图在细节面板中通过padding等来调节间距，结果发现找不到可以单个调节的属性，那如何在UniformGridPanel调节子组件间隔距离那？

答案是要在UniformGridPanel的细节面板中调节，因为UniformGridPanel要确保所有子组件大小间隔统一，所以不允许单独调节，这样设计也非常合理！

具体操作在UniformGridPanel的细节面板中调节Slot padding的属性值即可！小技巧为了保持后面子节点四周也是均匀的，我们一般只设置Left和Bottom，Right和Top不设置，会在更上一级的父组件中适配得到

调整一些Border的透明度，并且放到主面板中看一下效果吧

到这里，差不多UniformGridPanel面板的简单的使用差不多就到这里了，感兴趣的朋友可以自己调节其他细节参数，进行更加深度研究，一定会有更多惊喜！

都到这里了，我们就今天的这个效果做完整，接下来就和本节主题UniformGridPanel没有太大关系了，不感兴趣的可以跳过，希望今天这一节会对你有帮助！别忘记一键三连，你的点赞是我最大的动力！多谢！

放到主UI中效果：

事件的交互，后面专门找一个章节去讲，不是本章重点！再见！