TreeView最简单的使用，按层次结构展示

 

# 展示TreeView的窗口

class SimpleTreeViewWindow : EditorWindow
{
    [MenuItem("TreeView Examples/Simple Tree View Window")]
    static void ShowWindow()
    {
        var window = GetWindow<SimpleTreeViewWindow>();
        window.titleContent = new GUIContent("My Window");
        window.Show();
    }

    SimpleTreeView _tableView;
    TreeViewState _treeViewState;

    private void OnEnable()
    {
        if (null == _treeViewState)
            _treeViewState = new TreeViewState(); //单独用一个类, 以便于序列化状态

        _tableView = new SimpleTreeView(_treeViewState);
    }

    private void OnGUI()
    {
        var xMargin = 10;
        var yMargin = 10;
        var rect = new Rect(xMargin, yMargin, position.width - xMargin * 2, position.height - yMargin * 2);
        _tableView.OnGUI(rect);
    }

}

# TreeView

(#) BuildRoot必须重写

(#) 没有重写RowGUI的情况下，默认实现将直接用Label展示TreeViewItem的displayName

class SimpleTreeView : TreeView
{
    private Dictionary<int, string> _testDatas;
    
    public SimpleTreeView(TreeViewState state)
        : base(state)
    {
        CreateTestData();
        //customFoldoutYOffset = 5;
        showAlternatingRowBackgrounds = true; //隔行显示颜色
        showBorder = true; //表格边框
        Reload();
    }
    
    void CreateTestData()
    {
        _testDatas = new Dictionary<int, string>();
        for (var id = 0; id < 10; ++id)
        {
            _testDatas.Add(id, $"id_{id}");
        }
    }

    protected override TreeViewItem BuildRoot()
    {
        var rootTreeViewItem = new TreeViewItem(-1, -1); //root的depth必须为-1

        var rows = new List<TreeViewItem>();
        foreach (var entry in _testDatas)
        {
            var id = entry.Key;
            var displayName = entry.Value;
            var depth = id % 3;
            rows.Add(new TreeViewItem(id, depth, displayName));
        }
        SetupParentsAndChildrenFromDepths(rootTreeViewItem, rows); //根据depth自动调整TreeViewItem间的父子关系

        return rootTreeViewItem;
    }

}

 

# 效果图

 

# 关于customFoldoutYOffset，如果我们设置了其值为5，折叠箭头将偏下