cocos2d-Lua FairyGUI 之 树(十)

树

---

参考：树

简介

树是列表的特例，其本质上还是类似于列表，只是增加了展开/收缩的功能。

其代码结构为：

树是由TreeNode组成的，为了方便管理，tree提供了一个不可见的根节点。根节点是不可见的，它会管理所有的treeNode， 无论是主页签还是次页签。结构图如下:

从本质上来说，根节点(rootNode)也是treeNode。

注意：

• Tree虽然继承于List， 但是它是不支持虚拟
• 树的点击事件跟列表是一样的
• 树的动态创建，一定要在addChild之后，才能对树元素进行命名等操作
  
  

UI构建

• 使用树，可创建一个列表，在列表属性上激活：树视图
  
• 树视图激活后，项目资源就不要再设置了。因为树列表内的item至少包含两种不同的资源
• 编辑列表数据中，会增加新的一列: 层级 。树列表内的主/次Item就是通过层级设定的。
• 树视图右侧的⚙️，可以设置树列表属性
  

注意：

• 如果在UI中构建，编译列表数据不用勾选：发布时自动清空
  
• UI构建的话，可以使用treeNodeRender进行渲染回调

代码调用示例：

local tree1 = view:getChild("tree_1")
-- 使用回调渲染，前提是节点已经添加到树中
tree1.treeNodeRender = function(treeNode, component)
    local isFolder = treeNode:isFolder() 
    if isFolder then 
        component:setTitle("主页签")
    else 
        component:setTitle("次页签")
    end 
end 
tree1:addEventListener(fairygui.UIEventType.ClickItem, function(context)
    local treeNode = context:getData():treeNode()
    local isFolder = treeNode:isFolder()
    if isFolder then 
        print("点击了主页签")
    else 
        print("点击了次页签")
    end 
end)

动态构建

---

注意：

• 动态构建的话，不需要设置默认的项目资源
• 不支持使用treeNodeRender，因为它必须是节点已经addChild到树中才可以
• 页签节点的属性必须在addChild之后，才能设定

local urls = {
    [1] = "ui://Basic/listitem_3",    -- 主页签
    [2] = "ui://Basic/listitem_2",    -- 次页签
}

local tree = view:getChild("tree_2")
-- 获取树的根节点，它是不可见的
local rootNode = tree:getRootNode()

--[[
@ func: 用于树列表展开或缩放时使用，可增加或减少页签
@ param: treeNode 树节点
@ param: isExpand 是否展开
]]
tree.treeNodeWillExpand = function(treeNode, isExpand)
    local isFolder = treeNode:isFolder()
    if isExpand then 
        print("展开...")
    else 
        print("收回...")
    end 
end 
tree:addEventListener(fairygui.UIEventType.ClickItem, function(context)
    local selIndex = tree:getSelectedIndex()
end)

-- 每级主页签下的子页签数目
local datas = {0, 2, 1}                 
for i = 1, #datas do 
    -- 创建主页签, 节点放置到根节点中
    local treeNode = fairygui.GTreeNode:create(true, urls[1])
    rootNode:addChild(treeNode)
    -- 设置主页签是否打开,必须在addChild之后才能使用
    treeNode:setExpaned(true)
    -- 设置标题
    treeNode:getCell():setTitle("主页签" .. i)

    -- 创建子页签,节点在主页签中放置
    local num = datas[i]
    if num ~= 0 then 
        for j = 1, num do 
            local node = fairygui.GTreeNode:create(false, urls[2])
            treeNode:addChild(node)

            node:getCell():setTitle("次页签" .. j)
        end 
    end 
end 

示例效果：

其他

注意：

• 页签索引没有主次之分，从0依次向下累加
• 页签索引在展开/收缩下索引是不一致的。
• 计算索引，千万要考虑是否为主页签是否展开，且主页签下存在的子页签数目。

上一篇：cocos-Lua FairyGUI 之 列表(九)
下一篇：cocos2d-Lua FairyGUI 之 下拉框(十一)