Unity中4按钮图片堆叠交互如何实现栈push/pop自动补位

原有代码的核心问题 #

当前把槽位填充状态拆分存在每个按钮的脚本实例中，没有统一的全局状态管理，天然存在几个硬伤：

• 4个独立布尔值需要跨脚本同步状态，极容易出现判断错位、状态不同步的问题
• 硬编码的槽位位置赋值存在索引写错的bug（比如原代码中Slot2、Slot3都绑定了同一个位置索引）
• 完全没有实现移除图片后的自动补位逻辑，仅做了单图隐藏，达不到堆叠前移的效果

核心实现逻辑 #

你要的效果本质就是顺序栈的典型应用，完全不需要写大量if-else槽位判断，只要做一个独立的栈管理类统一维护状态即可：

• 入栈（Push）：用户点击未激活的图片按钮时，将对应图片加入栈容器末尾，自动匹配当前最靠后的空槽位
• 出栈（Pop）：用户点击已激活的图片按钮时，将对应图片从栈容器中移除，剩余元素自动往前补位，触发整体位置重排
• 重排逻辑统一抽成公共方法，不管是入栈还是出栈操作之后，遍历栈容器给每个元素赋值对应槽位的位置即可

具体实现步骤 #

1. 搭建统一栈管理器
   单独创建一个常驻场景的管理类，用List<GameObject>替代原来4个独立的填充布尔值：只要某个图片对象在列表里，就代表它已被激活、占用了对应索引的槽位，不需要额外的状态标记。同时在Inspector中绑定4个槽位的预设位置，避免硬编码索引写错。
2. 实现入栈逻辑
   接收到按钮的添加请求时，先校验栈长度是否达到4个槽的上限、目标图片是否已经在栈中，校验通过则激活图片、把它追加到栈列表的末尾，然后触发全栈位置刷新。
3. 实现出栈逻辑
   接收到按钮的移除请求时，校验目标图片是否在栈中，校验通过则把它从栈列表中移除、隐藏图片，然后同样触发全栈位置刷新——因为列表移除元素后后面的项会自动前移索引，只需要按照索引给每个元素赋值对应槽位的位置，就完全实现了“第二槽补第一槽、第三槽补第二槽”的自动位移效果。
4. 简化按钮端脚本
   每个按钮上的交互脚本只需要存自己绑定的专属图片引用，点击时直接判断当前图片在栈中的状态，调用管理器的入栈/出栈方法即可，不需要在按钮脚本里存任何全局槽位状态。

核心参考代码 #

// 栈管理器，挂在场景常驻对象上
public class ImageStackManager : MonoBehaviour
{
    public static ImageStackManager Instance { get; private set; }
    // 4个槽位的目标位置，在Inspector中拖拽赋值
    public Vector3[] slotPositions;
    // 栈容器：存储当前已激活的图片，顺序对应槽位0-3
    private List<GameObject> imageStack = new List<GameObject>();
    private readonly int maxSlotCount = 4;

    private void Awake()
    {
        Instance = this;
    }

    // 判断图片是否已经在栈中
    public bool IsImageInStack(GameObject target) => imageStack.Contains(target);

    // 入栈方法
    public void PushImage(GameObject targetImage)
    {
        if (IsImageInStack(targetImage) || imageStack.Count >= maxSlotCount) return;
        targetImage.SetActive(true);
        imageStack.Add(targetImage);
        RefreshStackSlot();
    }

    // 出栈方法
    public void PopImage(GameObject targetImage)
    {
        if (!IsImageInStack(targetImage)) return;
        imageStack.Remove(targetImage);
        targetImage.SetActive(false);
        RefreshStackSlot();
    }

    // 统一刷新栈内图片位置
    private void RefreshStackSlot()
    {
        for (int i = 0; i < imageStack.Count; i++)
        {
            imageStack[i].GetComponent<RectTransform>().anchoredPosition = slotPositions[i];
        }
    }
}

// 每个按钮上挂载的简化交互脚本
public class StackImageButton : MonoBehaviour
{
    // 每个按钮绑定对应的专属图片
    public GameObject boundImage;

    // 绑定到按钮的OnClick事件
    public void OnClickStackButton()
    {
        if (ImageStackManager.Instance.IsImageInStack(boundImage))
        {
            ImageStackManager.Instance.PopImage(boundImage);
        }
        else
        {
            ImageStackManager.Instance.PushImage(boundImage);
        }
    }
}

内容的提问来源于stack exchange，提问作者Soxehe