Unity?UGUI的VerticalLayoutGroup垂直布局組件介紹使用

更新時間：2023年07月26日 14:03:38 作者：AlianBlank

這篇文章主要為大家介紹了Unity?UGUI的VerticalLayoutGroup垂直布局組件介紹使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Unity UGUI的VerticalLayoutGroup（垂直布局）組件的介紹及使用

1. 什么是VerticalLayoutGroup組件？

VerticalLayoutGroup是Unity UGUI中的一種布局組件，用于在垂直方向上自動排列子對象。它可以根據子對象的大小和布局設置，自動調整子對象的位置和大小，實現(xiàn)垂直布局效果。

2. VerticalLayoutGroup組件的工作原理

VerticalLayoutGroup組件通過以下步驟實現(xiàn)垂直布局：

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

3. VerticalLayoutGroup組件的常用屬性

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

4. VerticalLayoutGroup組件的常用函數

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

5. 例子代碼

例子1：創(chuàng)建一個垂直布局的面板

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;
    }
}

操作步驟：

創(chuàng)建一個空物體，并將VerticalLayoutGroup組件添加到該物體上。
將需要進行垂直布局的子對象添加到VerticalLayoutGroup物體下。
將VerticalLayoutExample腳本添加到VerticalLayoutGroup物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing設置為10，childForceExpandWidth和childForceExpandHeight設置為false，childControlHeight設置為true，childAlignment設置為UpperCenter。

例子2：動態(tài)添加子對象

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);
        }
    }
}

操作步驟：

創(chuàng)建一個空物體，并將VerticalLayoutGroup組件添加到該物體上。
創(chuàng)建一個子對象的預制體，并將其賦值給AddChildExample腳本的childPrefab變量。
將AddChildExample腳本添加到空物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing和其他布局設置進行適當調整。

例子3：動態(tài)刪除子對象

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);
        }
    }
}

操作步驟：

創(chuàng)建一個空物體，并將VerticalLayoutGroup組件添加到該物體上。
將RemoveChildExample腳本添加到空物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing和其他布局設置進行適當調整。
運行游戲，所有子對象將被刪除。

例子4：動態(tài)調整子對象的大小

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);
        }
    }
}

操作步驟：

創(chuàng)建一個空物體，并將VerticalLayoutGroup組件添加到該物體上。
將ResizeChildExample腳本添加到空物體上。
在Inspector面板中，將VerticalLayoutGroup的spacing和其他布局設置進行適當調整。
運行游戲，所有子對象的高度將被調整為100。

例子5：動態(tài)調整子對象的對齊方式

using UnityEngine;
using UnityEngine.UI;
public class AlignChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
        verticalLayoutGroup.childAlignment = TextAnchor.MiddleCenter;
    }
}

操作步驟：