树
参考:树
简介
树
是列表的特例,其本质上还是类似于列表,只是增加了展开/收缩
的功能。
其代码结构为:
树是由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 之 下拉框(十一)