Unity UGUI的VerticalLayoutGroup（垂直佈局）元件的介紹及使用

1. 什麼是VerticalLayoutGroup元件？

VerticalLayoutGroup是Unity UGUI中的一種佈局元件，用於在垂直方向上自動排列子物件。它可以根據子物件的大小和佈局設定，自動調整子物件的位置和大小，實現垂直佈局效果。

2. VerticalLayoutGroup元件的工作原理

VerticalLayoutGroup元件通過以下步驟實現垂直佈局：

獲取所有子物件的RectTransform元件。
根據子物件的大小和佈局設定，計運算元物件的位置和大小。
調整子物件的位置和大小，使其按照垂直方向上的佈局要求進行排列。

3. VerticalLayoutGroup元件的常用屬性

Padding：內邊距，控制子物件與VerticalLayoutGroup之間的間距。
Spacing：子物件之間的間距。
Child Force Expand：子物件是否自動擴充套件以填充VerticalLayoutGroup的寬度。
Child Control Height：子物件是否自動調整高度以適應VerticalLayoutGroup的高度。
Child Alignment：子物件的對齊方式。

4. VerticalLayoutGroup元件的常用函數

CalculateLayoutInputHorizontal()：計算垂直佈局的水平方向上的佈局要求。
CalculateLayoutInputVertical()：計算垂直佈局的垂直方向上的佈局要求。
SetLayoutHorizontal()：設定垂直佈局的水平方向上的佈局。
SetLayoutVertical()：設定垂直佈局的垂直方向上的佈局。

5. 例子程式碼

例子1：建立一個垂直佈局的面板

using UnityEngine;
using UnityEngine.UI;

public class VerticalLayoutExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        verticalLayoutGroup.spacing = 10f;
        verticalLayoutGroup.childForceExpandWidth = false;
        verticalLayoutGroup.childForceExpandHeight = false;
        verticalLayoutGroup.childControlHeight = true;
        verticalLayoutGroup.childAlignment = TextAnchor.UpperCenter;
    }
}

操作步驟：

建立一個空物體，並將VerticalLayoutGroup元件新增到該物體上。
將需要進行垂直佈局的子物件新增到VerticalLayoutGroup物體下。
將VerticalLayoutExample指令碼新增到VerticalLayoutGroup物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing設定為10，childForceExpandWidth和childForceExpandHeight設定為false，childControlHeight設定為true，childAlignment設定為UpperCenter。

例子2：動態新增子物件

using UnityEngine;
using UnityEngine.UI;

public class AddChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    public GameObject childPrefab;

    private void Start()
    {
        for (int i = 0; i < 5; i++)
        {
            GameObject child = Instantiate(childPrefab, verticalLayoutGroup.transform);
            child.GetComponentInChildren<Text>().text = "Child " + (i + 1);
        }
    }
}

操作步驟：

建立一個空物體，並將VerticalLayoutGroup元件新增到該物體上。
建立一個子物件的預製體，並將其賦值給AddChildExample指令碼的childPrefab變數。
將AddChildExample指令碼新增到空物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing和其他佈局設定進行適當調整。

例子3：動態刪除子物件

using UnityEngine;
using UnityEngine.UI;

public class RemoveChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        for (int i = 0; i < verticalLayoutGroup.transform.childCount; i++)
        {
            Destroy(verticalLayoutGroup.transform.GetChild(i).gameObject);
        }
    }
}

操作步驟：

建立一個空物體，並將VerticalLayoutGroup元件新增到該物體上。
將RemoveChildExample指令碼新增到空物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing和其他佈局設定進行適當調整。
執行遊戲，所有子物件將被刪除。

例子4：動態調整子物件的大小

using UnityEngine;
using UnityEngine.UI;

public class ResizeChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        for (int i = 0; i < verticalLayoutGroup.transform.childCount; i++)
        {
            RectTransform childRectTransform = verticalLayoutGroup.transform.GetChild(i).GetComponent<RectTransform>();
            childRectTransform.sizeDelta = new Vector2(childRectTransform.sizeDelta.x, 100f);
        }
    }
}

操作步驟：

建立一個空物體，並將VerticalLayoutGroup元件新增到該物體上。
將ResizeChildExample指令碼新增到空物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing和其他佈局設定進行適當調整。
執行遊戲，所有子物件的高度將被調整為100。

例子5：動態調整子物件的對齊方式

using UnityEngine;
using UnityEngine.UI;

public class AlignChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        verticalLayoutGroup.childAlignment = TextAnchor.MiddleCenter;
    }
}

操作步驟：

建立一個空物體，並將VerticalLayoutGroup元件新增到該物體上。
將AlignChildExample指令碼新增到空物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing和其他佈局設定進行適當調整。
執行遊戲，所有子物件的對齊方式將被調整為MiddleCenter。

注意事項

VerticalLayoutGroup元件只能用於垂直佈局，如果需要水平佈局，請使用HorizontalLayoutGroup元件。
在使用VerticalLayoutGroup元件時，確保子物件的RectTransform元件的錨點和位置設定正確，以便正確計運算元物件的位置和大小。

參考資料

Unity官方檔案：VerticalLayoutGroup
Unity官方教學：Layout Groups