Unity横竖滑动列表嵌套UGUI / ScrollRect

一. 前言

游戏开发过程中，很可能需要制作横竖嵌套的滑动列表。如下效果：

Unity的滑动列表会根据用户的操作行为捕获到对应的事件，但是Unity的事件一旦被上层UI捕获，下层UI就不会响应，如果是嵌套列表，那么二级列表就会劫持掉事件，导致一级列表无法拖动。

二. 实现

1. 实现原理

要解决滑动列表嵌套的这个问题，可以根据用户滑动的方向，来进行事件的透传，比如在横向滑动的区域，如果用户是进行竖向滑动，则把事件透传到父级列表，如果父级列表是竖向滑动列表，则可以进行响应，否则继续透传。

UI事件透传接口:

ExecuteEvents.Execute<T>(GameObject target, BaseEventData eventData, EventFunction<T> functor) where T : IEventSystemHandler;

2. 制作横竖嵌套滑动列表界面

如下，ScrollRect_V为竖向滑动，ScrollRect_H为横向滑动。

ScrollRect_V节点和ScrollRect_H节点要挂CustomScrollRect脚本（脚本代码见文章最下面），并设置好Content对象，根据滑动方向勾选Horizontal或Vertical。

ScrollRect_V节点要挂Rect Mask 2D组件，否则滑动列表没有裁切效果。

ScrollRect_H节点的ChildContent挂上布局组件: Horizontal Layout Group、Content Size Fitter。并创建n个Child精灵图，比如苹果、香蕉之类的。

3. 运行Unity进行测试

运行Unity，即可测试嵌套滑动列表了。

4. CustomScrollRect脚本代码

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

public class CustomScrollRect :ScrollRect {

    //父CustomScrollRect对象
    private CustomScrollRect m_Parent;

    public enum Direction
    {
        Horizontal,
        Vertical
    }
    //滑动方向
    private Direction m_Direction = Direction.Horizontal;
    //当前操作方向
    private Direction m_BeginDragDirection = Direction.Horizontal;

	protected override void Awake()
	{
        base.Awake();
        //找到父对象
        Transform parent = transform.parent;
        if(parent){
            m_Parent = parent.GetComponentInParent<CustomScrollRect>();
        }
        m_Direction = this.horizontal ? Direction.Horizontal : Direction.Vertical;
	}


	public override void OnBeginDrag(PointerEventData eventData)
	{
        if(m_Parent){
            m_BeginDragDirection = Mathf.Abs(eventData.delta.x) > Mathf.Abs(eventData.delta.y) ? Direction.Horizontal : Direction.Vertical;
            if(m_BeginDragDirection != m_Direction){
                //当前操作方向不等于滑动方向，将事件传给父对象
                ExecuteEvents.Execute(m_Parent.gameObject, eventData, ExecuteEvents.beginDragHandler);
                return;
            }
        }

        base.OnBeginDrag(eventData);
	}
	public override void OnDrag(PointerEventData eventData)
	{
        if (m_Parent) {
            if (m_BeginDragDirection != m_Direction){
                //当前操作方向不等于滑动方向，将事件传给父对象
                ExecuteEvents.Execute(m_Parent.gameObject, ExecuteEvents.dragHandler);
                return;
            }
        }
        base.OnDrag(eventData);
	}

	public override void OnEndDrag(PointerEventData eventData)
	{
        if (m_Parent){
            if (m_BeginDragDirection != m_Direction){
                //当前操作方向不等于滑动方向，将事件传给父对象
                ExecuteEvents.Execute(m_Parent.gameObject, ExecuteEvents.endDragHandler);
                return;
            }
        }
        base.OnEndDrag(eventData);
	}
	
    public override void OnScroll(PointerEventData data)
	{
        if (m_Parent){
            if (m_BeginDragDirection != m_Direction){
                //当前操作方向不等于滑动方向，将事件传给父对象
                ExecuteEvents.Execute(m_Parent.gameObject, data, ExecuteEvents.scrollHandler);
                return;
            }
        }
        base.OnScroll(data);
	}
}

三、答疑

更新（2021-4-7）
有同学私信我说没做出来，

于是今天我重新写了一篇文章，并附上Demo工程，感兴趣的同学可以进行阅读学习。
《Unity UGUI实现横竖嵌套列表ScrollView（利用事件透传），含Demo工程》

完毕。
喜欢Unity的同学，不要忘记点击关注，如果有什么Unity相关的技术难题，也欢迎留言或私信~