当在 UI 元素外部发生点击时，如何关闭该元素？

Question

这个问题有很多解决方案，但似乎没有一个适合我。我有一个按钮，可以打开 UI 元素中的选择列表，并且我希望在在其外部单击时将其关闭。我目前有这个：

private void OnEnable()
{
    EventSystem.current.SetSelectedGameObject(gameObject);
}

public void OnDeselect(BaseEventData eventData)
{
    //Close the Window on Deselect only if a click occurred outside this panel
    if (!mouseIsOver)
        gameObject.SetActive(false);
}

public void OnPointerEnter(PointerEventData eventData)
{
    mouseIsOver = true;
    EventSystem.current.SetSelectedGameObject(gameObject);
}

public void OnPointerExit(PointerEventData eventData)
{
    mouseIsOver = false;
    EventSystem.current.SetSelectedGameObject(gameObject);
}

这在 PC 上运行良好，但不幸的是，由于移动设备上没有实际的指针，即使在内部单击它也会关闭面板。我尝试过使用这样的东西：

foreach (Touch touch in Input.touches)
    {
        int id = touch.fingerId;
        if (EventSystem.current.IsPointerOverGameObject(id))
        {
            isClicked = true;
        }
        if (Input.GetMouseButtonDown(0))
        {
            // Check if the mouse was clicked over a UI element
            if (EventSystem.current.IsPointerOverGameObject())
            {
                isClicked = true;
            }
        }
    }

但这也没有奏效。这似乎是一个非常简单的问题，我不明白为什么我找不到一个简单的解决方案。

Answer 1

我建议在创建下拉菜单时使用 Unity 技术。

看这个链接

主要思想是在按钮和其他 ui 元素后面创建拦截器。

您的打开面板功能应如下所示：

private RectTransform gameObjectTransform;
public void OpenPanel()
{
    CreateBlocker();
    gameObjectTransform = transform.parent;
    transform.SetParent(GetComponentInParent<Canvas>());
    transform.SetAsLastSibling();
}

创建拦截器方法，如文档中所示：

private GameObject currentBlocker;
public void CreateBlocker()
{
    GameObject gameObject = new GameObject("Blocker");
    RectTransform rectTransform = gameObject.AddComponent<RectTransform>();
    rectTransform.SetParent(ChatGraphics.Instance.mainCanvas, false);
    rectTransform.anchorMin = (Vector2)Vector3.zero;
    rectTransform.anchorMax = (Vector2)Vector3.one;
    rectTransform.sizeDelta = Vector2.zero;
    Canvas canvas = gameObject.AddComponent<Canvas>();
    canvas.overrideSorting = true;
    canvas.sortingLayerID = component.sortingLayerID;
    canvas.sortingOrder = component.sortingOrder - 1;
    gameObject.AddComponent<GraphicRaycaster>();
    gameObject.AddComponent<Image>().color = Color.clear;
    gameObject.AddComponent<Button>().onClick.AddListener(delegate { Hide(); });
    currentBlocker = gameObject;
}

最后是 Hide 方法，每次都应该调用它（即使拦截器没有触发）

public void Hide()
{
    if (currentBlocker != null)
        Destroy(currentBlocker);
    if (gameObjectTransform != null)
        transform.SetParent(gameObjectTransform);
    // Your code to hide your panel
}

Answer 2

通过 RegisterCallback 方法使用 UI 事件。

 _inspectorVisualElement.Q<VisualElement>("Inspector")
        .RegisterCallback<MouseLeaveEvent>(e => _inspectorVisualElement.RemoveFromClassList(VisibleClassName));

在上面的示例中，当光标离开时，我关闭带有类名的检查器视觉元素。它也适用于屏幕触摸。