如何生成多个ui按钮，将其放置在画布的左上角，并在按钮之间留出相等的间距？

Question

parent is the Canvas I want to position the buttons at the top left corner. And by spaces I mean to position each button under the next one with eual space for example :

Button 1

Button 2

Button 3

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class GenerateUIButtons : MonoBehaviour
{
    public GameObject buttonPrefab;
    public GameObject parent;
    public int numberOfButtons;
    public float spaceBetweenButtons;

    // Start is called before the first frame update
    void Start()
    {
        float minX = parent.GetComponent<RectTransform>().position.x + parent.GetComponent<RectTransform>().rect.xMin;
        float maxY = parent.GetComponent<RectTransform>().position.y + parent.GetComponent<RectTransform>().rect.yMax;
        float z = parent.GetComponent<RectTransform>().position.z;

        Vector3 topLeft = new Vector3(minX, maxY, z);

        for (int i = 0; i < Rotate.names.Length; i++)
        {
            GameObject newButton = Instantiate(buttonPrefab);
            newButton.name = Rotate.names[i];
            newButton.transform.position = topLeft;
            newButton.transform.SetParent(parent.transform, false);
        }
    }

    // Update is called once per frame
    void Update()
    {

    }
}

I tried this part to calculate the top left position of the canvas also tried using localPosition but in both cases localPosition and position it's creating the buttons outside the canvas area above the canvas:

Answer 1

Two approaches, first the simple one, use Vertical/HorizontalLayoutGroup. Those contains spacing and padding variables to set your items.

The second one is to add a parent container and make your button as children of it.

If you have a defined amount of items then no need for code, just set the anchoring values.

If you want them stacked vertically:

minX = 0 maxX = 1
minY = 2/3 maxY = 1

minX = 0 maxX = 1
minY = 1/3 maxY = 2/3

minX = 0 maxX = 1
minY = 0 maxY = 1/3

then you can use Left/Top/Right/Bottom to set the margin and spacing. So if you want to occupy full width and have 5px space between items

Left = 0 Top = 0
Right = 0 Bottom = 2.5

Left = 0 Top = 2.5
Right = 0 Bottom = 2.5

Left = 0 Top = 2.5
Right = 0 Bottom = 0