本文来自网易云社区

作者：汪毅军

最近使用了NGUI做了下可展开列表，其主要思路如下：首先最外层使用Scroll view以达到滑动效果，然后列表使用UITable进行排列，最后通过点击Item控制Item的显示和隐藏。 效果如下：

Item结构

列表层次结构图如下：

每一个Item下可分为两部分：其中HideItem表示隐藏的部分。剩余的表示一直显示的内容，就比如效果图中的“Item1”，“Item2”等内容。 我们可以根据具体需求提前摆放好Item，或者通过代码动态加载。

功能实现

• 首先给UITable下的每个Item挂载上点击监听

    [SerializeField]    private UITable _table;    private List
    
      items;    void Start ()    {        items = _table.GetChildList();        for (int i = 0; i < items.Count; i++)        {            Transform item=items[i];            UIEventListener.Get(item.gameObject).onClick = OnItemClick;        }        _table.Reposition();    }
    

• 其次定义好打开和关闭操作，需要注意的是，每次打来关闭后，务必调用一下_table.Reposition()以触发UITable去重新排列。

    private void OpenItem(Transform transform)    {        transform.Find("HideItem").gameObject.SetActive(true);    }    private void CloseItem(Transform transform)    {        transform.Find("HideItem").gameObject.SetActive(false);    }    private void ToggleItem(Transform transform)    {        if (transform.Find("HideItem").gameObject.activeSelf)        {            CloseItem(transform);        }        else        {            OpenItem(transform);        }    }    private void OnItemClick(GameObject go)    {//      这里用于关闭其他的Item,视具体需求使用//        for (int i = 0; i < items.Count; i++)//        {//            if(items[i]!=go.transform) CloseItem(items[i]); //            //        }        ToggleItem(go.transform);        _table.Reposition();    }

到此为止，一个最简单的可展开列表就实现了。

网易云，0成本体验20+款云产品！ 

更多网易研发、产品、运营经验分享请访问。

相关文章：

【推荐】 

【推荐】