Unity修仙手游 | lua动态滑动功能（3种源码具体实现）

在 Unity 中，有很多的 UI 参考，具体可以参照下方的官方手册

https://docs.unity3d.com/cn/current/Manual/script-ScrollRect.html

此次了解的是滑动列表的制作，我们在 UI-Window 下新建一个 sv 挂上 滚动矩形 (Scroll Rect)，再挂上我们的 content 即可，蓝色框表示滚动方式，按照一般标准的手机分辨率，我们只勾选垂直（Vertical）方式。

在 sv 下的 Viewport上，挂载上我们的 mask，确保我们鼠标点击/移动的区域

最后在我们的 content 上挂载自动布局方式：垂直布局组 (Vertical Layout Group)

test_item的inspector面板（Unity3D属性监视面板 (Inspector) Unity3D属性监视面板中的属性允许用户在代码外部改变脚本及组件的初始值。）

---

为了加快熟悉业务程序 UI 的设计，简单实现了一下 lua 滑动列表的实现。实现的效果如下：

点击我们的 btn_add 按钮可以生成可供滑动的列表元素，这些元素的属性和数据可以通过 local datas = { } 来获取，我们可以在里面给每个小的横向列表附值，并且通过 function( ) .. end, 反馈 btn_add 按钮的点击事件。这是比较好的一种方法，就是将我们的 local datas = { } 写进我们的 on_clicked_btn_add(btn) 来一键生成多个列表元素。Lua 代码示例如下：

-- 这里面的功能主要是实现点击btn_add按钮一键生成items，其余稍后改动
--（3）在datas中一键生成滑动列表元素
function TestWindow1:on_clicked_btn_add(btn)
    local datas = {
        {
            text = "number:1",
            function() 
                print("生成的第1个列表元素")
            end,
        },
        {
            text = "number:2",
            function() 
                print("生成的第2个列表元素")
            end,
        },
        {
            text = "number:3",
            function() 
                print("生成的第3个列表元素")
            end,
        },
        {
            text = "number:4",
            function() 
                print("生成的第4个列表元素")
            end,
        },
    }
    item.text_name.text = TT("test!!!!!")
    item.go:SetActive(true)
    for idx, data in ipairs(datas) do
        local item = self:get_or_init_test_item(idx)
        item.text_name.text = data.name
        item.text_name.text = TT(data.text)
        item.go:SetActive(true)
    end
end

function TestWindow1:on_clicked_btn_minus(btn)
    local item = self.test_items[1]
    if item then
        table.remove(self.test_items, 1)
        GameObject.Destroy(item.gameObject) --一定要用item.gameObject，保证unity对应unity
    end
end

其他两种方法分别如下：

-- TestWindow1.lua

--Lua 中的变量全是全局变量，无论语句块或是函数里，除非用 local 显式声明为局部变量，变量默认值均为nil
local TestWindow1 = class('TestWindow1', 'UIWindow') --定义一个函数内的局部变量

--Inspector下TestWindow1下点击生成lua自动生成
function TestWindow1:__awake(name) 
    self:load('TestWindow1')
    self.btn_add = self:fcc('btn_add', UT_BTN)
    self:listen_button_clicked(self.btn_add, function(btn) self:on_clicked_btn_add(btn) end)

    self.btn_minus = self:fcc('btn_minus', UT_BTN)
    self:listen_button_clicked(self.btn_minus, function(btn) self:on_clicked_btn_minus(btn) end)

    self.test_item = self:fco('test_item')
    self.content = self:fcc('sv/Viewport/content', UT_Rect)
    self.btn_bcak = self:fcc('btn_bcak', UT_BTN)
    self:listen_button_clicked(self.btn_bcak, function(btn) self:on_clicked_btn_bcak(btn) end)

    if self.awake then self:awake() end
end

function TestWindow1:on_clicked_btn_bcak(btn)
    self:hide() 
end

-------------------------------------------------------------------------------------------------------------------------

--（1）最简单的方法添加items--一个个加
function TestWindow1:on_clicked_btn_add(btn)
    local item = GameObject.Instantiate(self.test_item, self.content)
    item:SetActive(true)
    table.insert(self.test_items, item)
end

-------------------------------------------------------------------------------------------------------------------------

--（2）for循环生成滑动列表元素
--[[
function TestWindow1:on_clicked_btn_add(btn)
    item.text_name.text = TT("test!!!!!")
    item.go:SetActive(true)
    for i=1 , 5 do 
        local item = self:get_or_init_test_item(i)
        item.text_name.text = TT(i)
        item.go:SetActive(true)
    end
end
]]--

-------------------------------------------------------------------------------------------------------------------------

function TestWindow1:on_clicked_btn_minus(btn)
    local item = self.test_items[1]
    if item then
        table.remove(self.test_items, 1)
        GameObject.Destroy(item.gameObject)
    end
end

local test_icon_path = "UI/SkillIcon/5123.png"

function TestWindow1:build_test_data() --构建显示数据
    local datas = {
        {
            text = "number:1",
            function() 
                print("生成的第1个列表元素")
            end,
        },
        {
            text = "number:2",
            function() 
                print("生成的第2个列表元素")
            end,
        },
        {
            text = "number:3",
            function() 
                print("生成的第3个列表元素")
            end,
        },
        {
            text = "number:4",
            function() 
                print("生成的第4个列表元素")
            end,
        },
    }
    return datas
end

function TestWindow1:get_or_init_test_item(idx) --获取和初始化item元素
    local item = self.test_items[idx]
    if not item then
        local go = GameObject.Instantiate(self.test_item, self.content)
        item = {
            go = go,
            text_name = fcc(go, "text_name", UT_TMP),
            img_icon = fcc(go, "img_icon", UT_IMAGE),
            btn_go = fco(go, "btn_go"),
            text_btn = fco(go, "btn_go/text_btn"),
        }
        self.test_items[idx] = item
    end
    return item
end
    
function TestWindow1:awake()
    self.test_items = {}
end

function TestWindow1:refresh()
    self.datas = self:build_test_data()
    log_warn("test window refresh datas: %s", pts(self.datas))
    for idx, data in ipairs(self.datas or {}) do
        log_warn(" refresh item： %s", pts(data))
        local item = self:get_or_init_test_item(idx)        --初始化item
        --赋值item
        item.text_name.text = data.text
        item.img_icon.sprite = self:load_sprite(string.format(test_icon_path, data.icon))
        local show_btn = data.btn_text ~= nil or data.btn_text ~= ""
        item.btn_go.gameObject:SetActive(show_btn)
        if show_btn then
            self:listen_button_clicked(
                item.btn_go,
                function(btn)
                    data[1]()
                end
            )
        end
        item.go:SetActive(true)
    end
end

function TestWindow1:on_show()
    log_warn("test window on show")
    self:refresh()
end
function TestWindow1:on_hide()
    USER:unlisten_field_changed(self)
end
function TestWindow1:dispose()
end