要实现点击某个按钮时,其他按钮移动到新面板下方的位置,需要修改按钮点击事件中的布局逻辑。根据浮生梦老师前端课程内容,可以通过以下步骤实现:
```lua
-- 在按钮点击事件中修改:
GUI:addOnClickEvent(child, function()
-- 移除之前显示的克隆组件
if npc.currentClone and not GUI:Win_IsNull(npc.currentClone) then
GUI:removeFromParent(npc.currentClone)
npc.currentClone = nil
end
-- 克隆新的Panel
local newPanel = GUI:Clone(npc.ui.Panel_1)
GUI:setVisible(newPanel, true)
-- 获取当前点击按钮的索引
local clickedIndex = GUI:ListView_getItemIndex(npc.ui.ListView_1, child)
-- 计算插入位置(当前按钮后面)
local insertPosition = clickedIndex + 1
-- 先插入新面板
GUI:ListView_insertCustomItem(npc.ui.ListView_1, newPanel, insertPosition)
npc.currentClone = newPanel
if GUI:Win_IsNull(newPanel) then
SL:print("容器不存在")
return
end
-- 设置新面板初始状态
GUI:setScaleY(newPanel, 0)
-- 创建展开动画
local expand = GUI:ActionScaleTo(0.5, 1, 1)
GUI:runAction(newPanel, expand)
-- 重新调整其他按钮位置
local allItems = GUI:ListView_getItems(npc.ui.ListView_1)
-- 遍历所有项目,调整位置
for i = 1, #allItems do
local item = allItems[i]
local name = GUI:getName(item)
-- 如果是Button_1到Button_4且不是当前点击的按钮
if (name == "Button_1" or name == "Button_2" or name == "Button_3" or name == "Button_4")
and item ~= child then
-- 获取当前索引
local currentIndex = GUI:ListView_getItemIndex(npc.ui.ListView_1, item)
-- 如果这个按钮在新面板之前,需要重新插入到新面板后面
if currentIndex < insertPosition then
-- 先移除
GUI:ListView_removeItem(npc.ui.ListView_1, currentIndex)
-- 重新插入到新面板后面
GUI:ListView_insertCustomItem(npc.ui.ListView_1, item, insertPosition + 1)
end
end
end
SL:print("点击了按钮:", name, "插入位置:", insertPosition)
end)
```
关键修改点:
1. 在插入新面板后,重新遍历所有按钮
2. 对于其他按钮(Button_1到Button_4且不是当前点击的按钮)
3. 如果它们在新面板之前的位置,先移除再重新插入到新面板后面
4. 这样其他按钮就会自动移动到新面板下方
注意:这里使用了`GUI:ListView_removeItem()`和`GUI:ListView_insertCustomItem()`函数来调整按钮位置,这些函数在浮生梦老师的前端课程中都有详细讲解。