cocos-Lua FairyGUI 之列表(九)

列表

参考: 列表

简介

前面曾说过在cocosStudio中，提供了PageView、ListView、ScrollView、TableView等。

在FairyGUI中，这些都可以由GList来实现。

列表，它有如下几个特点：

列表的滚动容器ScrollPane与列表GList的实现是分离的
支持上拉/下拉回调
支持虚拟列表的实现，其实现原理类似于tableView
虚拟列表的删除，不是通过remove而是通过setNumItems的数目来删除
列表支持多选，勾选UI编译器中：选择模式为多选（单击实现）即可
支持列表中嵌入不同样式的ListItem
可将列表拓展为树来使用

单选虚拟列表

虚拟列表的开启需要满足如下条件:

设置列表项目资源，如果列表样式一致，可通过编译器内项目资源设定。
列表开启滚动
定义itemRender，列表item的绘制
设定setVirtual，开启虚拟列表

注意：
setVirtual一定要放置到setNumItems前面，否则列表不能正常显示
如果列表为单选模式，listItem需设定为单选按钮

项目资源的设定，可以使用接口setDefaultItem:

local normalList = view:getChild("list_1")
-- 方式1
normalList:setDefaultItem("ui://a0imyaf1vx0u1")
-- 方式2
normalList:setDefaultItem("ui://Common/listitem_1")

另外，关于溢出处理在设定为为水平滚动、垂直滚动或自动滚动后，可以设置滚动容器的特性相关。

参考：滚动容器

滚动容器很少在代码中使用，使用情况无非有如下几种：

列表禁止滚动，不可将列表设为禁止触摸，这样会导致列表内的item无法点击。
列表需要置顶/底
将列表滚动到指定的索引位置

示例：

local itemNum = 500             -- item数目
local normalList = view:getChild("list_1")
-- 设置item绘制(索引从0开始)
normalList.itemRenderer = function(index, item)item:setTitle("标题...." .. index)
end
-- 开启列表虚拟功能
normalList:setVirtual()
-- 设置列表数目
normalList:setNumItems(itemNum)
normalList:addEventListener(fairygui.UIEventType.ClickItem, function(context)-- 获取列表选择索引(索引从0开始)local selIndex = normalList:getSelectedIndex()print("normalList 点击索引为:", selIndex)
end)
normalList:addEventListener(fairygui.UIEventType.PullUpRelease, function()print("上拉刷新回调")
end)
normalList:addEventListener(fairygui.UIEventType.PullDownRelease, function()print("下拉刷新回调")
end)-- 获取滚动容器
local scrollPane = normalList:getScrollPane()
-- 设置是否可滚动
local isTouch = (itemNum > 5) and true or false
scrollPane:setTouchEffect(isTouch)-- 置顶
local topBtn = view:getChild("topBtn")
topBtn:addEventListener(fairygui.UIEventType.Click, function()scrollPane:scrollTop()
end)
-- 置底
local downBtn = view:getChild("downBtn")
downBtn:addEventListener(fairygui.UIEventType.Click, function()scrollPane:scrollBottom()
end)
-- 滚动到指定索引位置
local sureBtn = view:getChild("sureBtn")
local inputText = view:getChild("inputText")
sureBtn:addEventListener(fairygui.UIEventType.Click, function()local index = tonumber(inputText:getText())if not index then return end if index < 0 or index >= itemNum then return end normalList:scrollToView(index, false)
end)

多选虚拟列表

列表是支持多选的，需要注意的地方是：

列表item需设定为复选按钮
通过编译器或者代码设定选择模式为多选(单击实现)

选择模式通过UI编译器设定即可，一般不会用代码：

local multiList = view:getChild("list_2")
--[[
选择模式，类型有:
SINGLE :                单选
MULTIPLE :              多选
MULTIPLE_SINGLECLICK :  多选单击
NONE :                  无
]]
local mode = fairygui.ListSelectionMode.MULTIPLE_SINGLECLICK
multiList:setSelectionMode(mode)

完整示例如下:

local multiList = view:getChild("list_2")
multiList.itemRenderer = function(index, item)item:setTitle("多选...." .. index)
end
multiList:setVirtual()
multiList:setNumItems(10)
multiList:addEventListener(fairygui.UIEventType.ClickItem, function(context)-- 获取选项，索引从0开始local selections = multiList:getSelection()-- selections: 0,2print("selections:", table.concat(selections, ","))
end)-- 重置
local resetBtn = view:getChild("resetBtn")
resetBtn:addEventListener(fairygui.UIEventType.Click, function()multiList:clearSelection()
end)-- 全选
local allBtn = view:getChild("allBtn")
allBtn:addEventListener(fairygui.UIEventType.Click, function()multiList:selectAll()
end)

多样列表

顾名思义，多样列表内的Item并非是重复的。

它主要关键点在于：itemProvider来实现listItem的多样性。

注意：

多样列表不需要设定默认的Item。
多样列表不需要开启虚拟

完整示例：

local variList = view:getChild("list_3")
-- 获取不同索引下的url(索引从0开始)
variList.itemProvider = function(index)if index == 1 then return "ui//Common/listitem_2"elseif index == 2 then return "ui//Common/radio_btn_1"elseif index == 3 then return "ui://a0imyaf1vx0u3s"elsereturn "ui://Common/listitem_1"end
end variList.itemRenderer = function(index, item)if index == 1 then -- do somethingelseif index == 2 then -- do somethingelseif index == 3 then item:setTitle("选择框标题")else local titleText = item:getChild("title")titleText:setText("文本标题:" .. index)end
end
variList:setNumItems(5)
variList:addEventListener(fairygui.UIEventType.ClickItem, function(context)local selIndex = variList:getSelectedIndex()-- 根据选择索引获取对象索引local childIndex = variList:itemIndexToChildIndex(selIndex)-- 根据对象索引获取对象节点local child = variList:getChildAt(childIndex)
end)

代码效果：

其他

如果列表动态创建，则UI编译器中需要清空发布资源, 这样有助于提升效率
重复说明下：多样列表不需要设置虚拟化，且不要在项目资源中设置默认资源

上一篇：cocos2d-Lua FairyGUI 之组(八)
下一篇：cocos2d-Lua FairyGUI 之树(十)

cocos-Lua FairyGUI 之列表(九)相关推荐

FairyGUI循环列表
FairyGUI循环列表实现效果:在Unity中,通过鼠标可以循环浏览列表,并且浏览当前页时,有一个近大远小的效果. 一.导入资源二.新建按钮三.设计列表四.装载器动态加载图片按钮如果有上万 ...
cocos lua调用java_【Tech-Lua】Cocos-2dx-Lua调用java的小白教程(三)
上周五下班前,打包成功了.我很高兴,周六去踢场足球,周日去现场看了最后一分钟掉球的恒大,度过了一个愉快的周末.然后,噩梦的周一开始了. 我再次打包,打算打包就安装,但结果是失败的.为何?我周五明明成功 ...
Visual Studio Code断点调试Cocos Lua
需求: 使用cocos 3.10新建Lua项目,命名为Project,其项目目录如下: 文件主要目录: res: cocos的资源目录 src: cocos lua的脚本目录使用Visual Stu ...
cocos lua 加密方案
cocos2d使用的是luajit,lua原生编译出来的bytecode和luajit是不兼容的,所以直接用luac法编译出来的bytecode脚本无法在cocos2d中使用. 目前所指的解决方案有2 ...
cocos lua 创建替换图片
关于Sprite或ImageView 创建图片或替换图片,使用cocos 2dx 3.10 lua: 一,sprite相关 -- 通过指定的某张图片创建 local sprite = cc.Sprit ...
FairyGUI虚拟列表
先上代码为敬: hero_List.itemRenderer = RenderListItem;hero_List.defaultItem = "ui://o3ujglcdqacwi3t&q ...
FairyGUI使用——列表居中放大动画
Unity:2021.1.14flc1 FairyGUI:4.2.0 效果图这里的代码基于循环列表的基础上改进的,可以参考FairyGUI使用--循环列表 FairyGUI内部设置 list的大小要 ...
cocos creator麻将教程系列(九)—— 幼麟棋牌代码讲解
这篇文章是官方整理的: 技术栈客户端引擎:Cocos Creator 2.0.6. 语言:Javasctipt 可用开发平台:MAC,Windows 可发布平台: iOS,Android,Wind ...
cocos lua 获取点到直线距离
最近做一款台球游戏,需要做这种效果,所以需要求的彩色球到直线的距离,高中数学几乎快忘光了. Google了一波,挖出了几个数学公式. 我的手中有这几个数据: 1.直线绕X轴正方向的角度,注意,这里co ...

cocos-Lua FairyGUI 之列表(九)

列表

简介

单选虚拟列表

多选虚拟列表

多样列表

其他

cocos-Lua FairyGUI 之列表(九)相关推荐

最新文章

热门文章

cocos-Lua FairyGUI 之 列表(九)

列表

简介

单选虚拟列表

多选虚拟列表

多样列表

其他

cocos-Lua FairyGUI 之 列表(九)相关推荐

最新文章

热门文章

cocos-Lua FairyGUI 之列表(九)

cocos-Lua FairyGUI 之列表(九)相关推荐