Unity组件大全之 Layout 组件 |（25）Grid Layout Group 网格布局组

📂 Unity 开发资源汇总 | 插件 | 模型 | 源码

💓 欢迎访问 Unity 打怪升级大本营

在 Unity 中，Grid Layout Group 是用于组织 UI 元素的强大工具之一。它属于 Unity UI 系统的一部分，主要用来将多个子对象排列成规则的网格布局。这种布局方式非常适合用于构建菜单、按钮面板、库存系统等需要均匀排列的界面元素。

本文将详细介绍 Grid Layout Group 组件的核心功能、使用场景，并通过一些代码示例展示如何在 Unity 中使用这个组件来设计布局。

📂 Unity组件大全 | 目录索引

💯 什么是 Grid Layout Group？

Grid Layout Group 是 Unity 中的布局管理器，属于 Layout Group 系列。它会根据你指定的规则将子对象排列成网格。网格可以是任意数量的行和列，并且每个元素的大小和间距都可以自由调整。这使得它非常适合用于需要固定行列结构的 UI 布局。

Grid Layout Group 的核心属性

1. Cell Size（单元格大小）

   • 定义网格中每个单元格的宽度和高度。每个 UI 元素将根据这个大小进行调整。
   • 例如：Cell Size = (100, 100) 会将每个子元素调整为 100x100 像素。

2. Spacing（间距）

   • 控制网格中相邻单元格之间的水平和垂直间距。可以用来调整元素之间的距离。
   • 例如：Spacing = (10, 10) 会在每个单元格之间增加 10 像素的间距。

3. Start Corner（起始角）

   • 指定第一个子对象的排列位置，可能的选项有：Upper Left、Upper Right、Lower Left、Lower Right。
   • 例如：如果设置为 Upper Left，则网格从左上角开始排列。

4. Start Axis（起始轴）

   • 定义元素的排列方向，可以选择按行或按列排列：
     • Horizontal：按行优先。
     • Vertical：按列优先。

5. Child Alignment（子对象对齐方式）

   • 用来控制子对象在单元格中的对齐方式。例如：左对齐、右对齐、居中对齐等。

6. Constraint（约束）

   • 定义网格的行列限制：
     • Flexible：根据空间自动调整行列数量。
     • Fixed Column Count：指定固定列数，行数会自动调整。
     • Fixed Row Count：指定固定行数，列数会自动调整。

💯 Grid Layout Group 使用场景

1. 菜单按钮布局

Grid Layout Group 非常适合用于构建按钮菜单。如果你有一组按钮需要均匀排列，可以使用 Grid Layout Group 来快速布局，而不需要手动调整每个按钮的位置和大小。

using UnityEngine;
using UnityEngine.UI;

public class MenuSetup : MonoBehaviour
{
    public GameObject buttonPrefab;
    public GridLayoutGroup gridLayout;

    void Start()
    {
        // 动态创建按钮并将其添加到 Grid Layout Group 中
        for (int i = 0; i < 9; i++)
        {
            GameObject newButton = Instantiate(buttonPrefab, gridLayout.transform);
            newButton.GetComponentInChildren<Text>().text = "Button " + (i + 1);
        }
    }
}

在这个例子中，我们创建了一个 3x3 的按钮网格，所有按钮都会自动根据 Grid Layout Group 的设置进行排列。你只需要定义好 Cell Size 和 Spacing，其他的一切都会由 Unity 处理。

2. 图片或图标展示

如果你需要显示一组图片或图标，使用 Grid Layout Group 可以轻松构建出整齐的展示面板。你可以设置图片的大小和间距，让 UI 布局更加美观。

3. 游戏道具或库存系统

在游戏中，Grid Layout Group 经常被用来构建玩家的背包或库存界面。通过设置固定大小的网格，可以方便地展示道具，并保持布局的一致性。

💯 Grid Layout Group 设置示例

在 Unity 中，可以通过编辑器或脚本设置 Grid Layout Group 的属性。以下是如何通过脚本动态设置 Grid Layout Group 的常用属性。

using UnityEngine;
using UnityEngine.UI;

public class DynamicGridLayout : MonoBehaviour
{
    public GridLayoutGroup gridLayoutGroup;

    void Start()
    {
        // 设置单元格大小
        gridLayoutGroup.cellSize = new Vector2(100, 100);

        // 设置单元格间距
        gridLayoutGroup.spacing = new Vector2(10, 10);

        // 设置从左上角开始排列
        gridLayoutGroup.startCorner = GridLayoutGroup.Corner.UpperLeft;

        // 按行优先排列
        gridLayoutGroup.startAxis = GridLayoutGroup.Axis.Horizontal;

        // 设置对齐方式为居中
        gridLayoutGroup.childAlignment = TextAnchor.MiddleCenter;

        // 固定列数为 3
        gridLayoutGroup.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayoutGroup.constraintCount = 3;
    }
}

在这个例子中，我们通过脚本设置了 Grid Layout Group 的各项属性。我们指定了网格中每个单元格的大小、间距，并设置了固定的列数为 3，因此无论子对象有多少，它们都会排列成三列的布局。

💯 Grid Layout Group 与其他布局组件的对比

Unity 提供了多种布局组件，例如 Horizontal Layout Group 和 Vertical Layout Group，它们分别用于水平和垂直排列子对象。与这些组件相比，Grid Layout Group 的优势在于其能够同时控制行和列的排列，适用于更复杂的布局需求。

• Horizontal Layout Group：仅水平排列子对象，适用于工具栏、横向按钮列表等。
• Vertical Layout Group：仅垂直排列子对象，适用于竖向列表、文本框等。
• Grid Layout Group：可以同时控制行和列的排列，适用于网格形式的界面设计。

💯 小结

Grid Layout Group 是 Unity 中常用的 UI 布局组件之一，通过简单的属性设置，可以轻松实现整齐的网格布局。无论是在菜单按钮、图标展示还是游戏背包中，Grid Layout Group 都能够帮助开发者快速构建美观且一致的 UI 界面。

通过合理使用这个组件，开发者可以大幅减少手动调整子对象位置的工作量，同时保证布局的统一性与响应性。如果你正在构建一个需要整齐排列 UI 元素的界面，不妨尝试使用 Grid Layout Group。

💯 参考文献

• Unity官方文档：Grid Layout Group

希望这篇博客能帮助你更好地理解 Unity 中 Grid Layout Group 的功能。如果你有任何疑问或建议，欢迎在评论区留言。

📂 Unity 开发资源汇总 | 插件 | 模型 | 源码

💓 欢迎访问 Unity 打怪升级大本营

🍉🍉🍉 如果觉得这篇文对你有帮助的话，请点个赞👍、收藏⭐️下吧，非常感谢! 💕💕💕

【博主简介】：10年以上软件开发经验，精通 C语言、C++、C#、Java 等开发语言，开发过大型 Android 项目，现主要自主开发经营 休闲益智类小游戏。

【粉丝福利】：博主收藏了大量游戏开发资源和素材。这些资源经过博主多年整理沉淀，现筛选一批精品资源，分享给大家学习研究。

Unity打怪军团 诚邀天下勇士加入 Unity学习互助小组 有意进群的同学联系我，互3互推也请联系我…