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,2
    print("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"
    else
        return "ui://Common/listitem_1"
    end  
end 

variList.itemRenderer = function(index, item)
    if index == 1 then 
        -- do something
    elseif index == 2 then 
        -- do something
    elseif 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 之 树(十)